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