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

我如何使用THIS，类似于jQuery。

Answer 1

正如我在评论中说的那样，我建议您不要使用“ THIS”，这意味着使用引用，因为这将导致直接编辑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”（再次使用引用），我可以为您提供示例。

如何在ReactJS中切换多个类

1 个答案: