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