为React组件中的按钮添加/删除CSS类

Question

在下面的ReactJS组件中，我使用React.createElement()呈现3个按钮。我想添加一些功能，点击按钮会得到一个"选定"类，而所有其他按钮都会得到一一个"未选定"类。此外，当组件首次加载时，我希望第一个按钮("全选"(具有"选定"类。

现在我已经使用jQuery编写了这个按钮逻辑，但我想知道如何在所有React中做到这一点。

class Mychart extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
handleClick(i) {
// for all buttons: remove 'selected' class, add 'unselected' class 
$('.custom-btn').removeClass('selected').addClass('unselected');
// for the button we're clicking on: remove the 'unselected' class, add 'selected' class
$('.custom-btn[index='+i+']').removeClass('unselected').addClass('selected');
}
render() {
[{label: 'Select All', label: 'Select Legacy', label: 'Select Kids'}].map((button, i) => {
return React.createElement('button', {className: i === 0 ? 'custom-btn selected' : 'custom-btn unselected', index: i, onClick: () => {this.handleClick(i)} }, button.label)
});
}
}
ReactDOM.render(React.createElement(Mychart), parent);

Answer 1

React的标准方法是记住哪个按钮是"选择"；一个有状态的(尽管正如ControlAltDel所指出的，在这种特定的情况下，你可能想使用CSS(：

class Mychart extends React.Component {
constructor(props) {
super(props);
this.state = {
// *** Start with none selected
selected: -1,
};
}
handleClick(i) {
this.setState({selected: i});
}
render() {
// Get the selected one
const {selected} = this.state;
return [{label: 'Select All'}, {label: 'Select Legacy'}, {label: 'Select Kids'}].map((button, i) => {
return React.createElement(
'button',
{
// *** Use the selected index
className: i === selected ? 'custom-btn selected' : 'custom-btn unselected',
key: i, // *** `key`, not `index`
onClick: () => {
this.handleClick(i);
}
},
button.label
);
});
}
}
ReactDOM.render(React.createElement(Mychart), document.getElementById("root"));

.custom-btn.selected {
color: green;
}

<div id="root"</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

(在没有JSX.：-D的情况下这样做感觉很奇怪(

注意：我不得不修复代码中的几个错误，主要的错误是您有一个数组，其中只有一个对象，其中有一个重复的label属性，而不是一个对象数组。

在你的代码中，你是按索引工作的，所以我就是这样做的，但我可能会给每个元素一个唯一的ID(或者使用label，如果label是唯一的(：

class Mychart extends React.Component {
constructor(props) {
super(props);
this.state = {
// *** Start with none selected
selected: "",
};
}
handleClick(label) {
this.setState({selected: label});
}
render() {
// Get the selected one
const {selected} = this.state;
return [{label: "Select All"}, {label: "Select Legacy"}, {label: "Select Kids"}].map(({label}, i) => {
return React.createElement(
"button",
{
// *** Use the selected index
className: label === selected ? "custom-btn selected" : "custom-btn unselected",
key: label, // *** `key`, not `index`
onClick: () => {
this.handleClick(label);
}
},
label
);
});
}
}
ReactDOM.render(React.createElement(Mychart), document.getElementById("root"));

.custom-btn.selected {
color: green;
}

<div id="root"</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 2

使用CSS，您可以为focused按钮创建样式，如：

button.custom-btn:focus {
color: green;
}

或

button:focus {
color: green;
}