我是 React 的新手，并試圖弄清楚如何在單擊時保持突出顯示按鈕。所需的行為就像一個表單，用戶被問到一個問題，并且可以選擇多個答案提交。單擊的每個答案（按鈕）將保持突出顯示。有沒有辦法達到這個效果？
<>
<Stack gap={2} className="col-md-5 mx-auto">
<h1>Question to ask user ?</h1>
<br />
<Button>Option 1</Button>
<Button>Option 2</Button>
<Button>Option 3</Button>
<Button>Option 4</Button>
<Button>Option 5</Button>
</Stack>
</>
uj5u.com熱心網友回復：
我認為您可能對這篇文章的最佳答案感興趣：How to keep :active css style after click a button。我認為他們提供的 JS 答案就是您正在尋找的，只是不包含洗掉類部分。
uj5u.com熱心網友回復：
創建擴展 Button 的新組件并在其中分配狀態。
class NewButton extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: null
}
}
buttonSelected = selected => ev => {
this.setState({ selected })
}
render() {
return (
<Button className={key === this.state.selected ? 'selected' : ''}>
{this.props}
<Button>
);
}
}
uj5u.com熱心網友回復：
如果你只是想hightlight基于點擊的時候，你可以使用一個按鈕CSS選擇器一樣:visited，并:active根據情況。
但是您要求的東西需要其他東西，也許您可??以為此使用復選框，也可以使用此
class Form extends React.Component {
state = {
selected: [],
};
selectButton = (name) => {
const tempSelected = { ...this.state.selected };
tempSelected.push(name);
this.setState({ selected: tempSelected });
};
isSelected = (name) => {
return this.state.selected.includes(name);
};
render() {
return (
<>
<button onClick={(e) => selectButton("A")} className={this.isSelected("A") ? "selected" : ""}>
A
</button>
<button onClick={(e) => selectButton("B")} className={this.isSelected("B") ? "selected" : ""}>
B
</button>
<button onClick={(e) => selectButton("C")} className={this.isSelected("C") ? "selected" : ""}>
C
</button>
<button onClick={(e) => selectButton("D")} className={this.isSelected("D") ? "selected" : ""}>
D
</button>
</>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330676.html
上一篇：在映射的卡片中單獨切換操作