如何在 ReactJS 中切换多个类

Question

我有一个问题，如何使用多个切换类

请查看下面我的示例

我想单击<TaxItem /> 并为该元素添加一些类，然后第二次单击以删除该类

import React, { Component } from "react";
import TaxItem from "./TaxItems/"
import Pentagon from "../../../assets/images/pentagon.png"

class Taxs extends Component {
  constructor(props) {
    super(props)
    this.state = {
      taxStatus: false
    }
    this.handleTaxStatus = this.handleTaxStatus.bind(this);
  }

  handleTaxStatus(element) {
    console.log('sdasa', element)
  }

  render() {
    return (
      <div className="taxs">
        <TaxItem
          image={Pentagon}
          name='Item 1'
          taxStatus={false}
          handleTaxStatus={this.handleTaxStatus(this)}
        />
        <TaxItem
          image={Pentagon}
          name='Item 2'
          taxStatus={false}
          handleTaxStatus={this.handleTaxStatus(this)}
        />
      </div>
    )
  }
}

export default Taxs

在这里你可以检查我有 onClick 的按钮：

import React, { Component } from "react";

class TaxItem extends Component {
  render() {
    return (
      <div className="tax-item" onClick={this.props.handleTaxStatus}>
        <div className={this.props.taxStatus ? 'checked on' : 'checked'}><i className="icon icon-check"></i></div>
        <img src={this.props.image} alt="Pentagon" />
        <p>{this.props.name}</p>
      </div>
    )
  }
}

export default TaxItem

我如何使用这个，比如 jQuery。

Answer 1

正如我在评论中所说，我建议你不要使用“THIS”，这意味着使用 refs，因为它会导致直接编辑 DOM，在 React 中应该尽可能避免。

相反，您可以使用一组taxStatus 属性，每个TaxItem 一个属性，并将它们用作切换，如下所示：

class TaxItem extends React.Component {
    localHandleClick = (_) => {
            this.props.handleClick(this.props.taxStatusIndex);
        };
    
    render() {
        const {taxStatus, handleClick} = this.props;
        
        return (
            <div
                className={"button" + (taxStatus ? " checked" : " not-checked")}
                onClick={this.localHandleClick} />
        );
    }
}

class Taxs extends React.Component {
    constructor(props) {
        super(props);
        
        const taxItemCounter = props.num;
        
        this.state = {
            taxesStatus: new Array(taxItemCounter).fill(false)
        }
    }
    
    handleClick = (i) => {
        const taxesStatus = this.state.taxesStatus;
        taxesStatus[i] = !taxesStatus[i];
        
        this.setState({taxesStatus});
    }
    
    render() {
        return (
            <div>
                {
                    this.state.taxesStatus.map((status, index) => 
                        <TaxItem
                            key={index}
                            taxStatusIndex={index}
                            handleClick={this.handleClick}
                            taxStatus={status} />
                )}
            </div>
        );
    }
}

ReactDOM.render(<Taxs num={3} />, document.getElementById('root'));

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

.button {
    width: 100px;
    height: 25px;
    background: red;
    margin: 10px;
    cursor: pointer;
}

.button.checked {
    background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

无论如何，如果您确实想使用“THIS”（这又意味着使用参考），我可以为您提供一个示例。