为 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;
}