Question

我是新的反应并尝试添加基于数组的类，但是当我点击另一个按钮时，当我点击另一个按钮时，活动类应该保留在最后一个按钮类中，我没有任何线索这样做。

class Child extends React.Component {
  render(){
    return(
     <button
      onClick={this.props.onClick}
      className={`initClass ${this.props.isClass}`}>
      {this.props.text}
    </button>
   )
  }
}

class Parent extends React.Component {
 constructor(props) {
    super(props);
     this.state = {
      newClass: null,
     };
  }

  myArray(){
    return [
     "Button 1",
     "Button 2",
     "Button 3"
   ];
  }

  handleClick (myIndex,e) {
   this.setState({
     newClass: myIndex,
    });
  }

  render () {
    return (
      <div>
       {this.myArray().map((obj, index) => {
         const ifClass = this.state.newClass === index ? 'active' : '';
         return <Child
           text={obj}
           isClass={ifClass}
           key={index}
           onClick={(e) => this.handleClick(index,e)} />
       })}
     </div>
   )
  }
}

ReactDOM.render(<Parent/>, document.querySelector('.content'));

.active {
  background: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

<div class='content'/>

Answer 1

使你的newClass成为一个数组，同时让类检查你的状态数组中是否存在该索引。

constructor(props) {
  super(props);
   this.state = {
    newClass: [],    //an array
   };
}

....

handleClick (myIndex,e) {
 if(!this.state.newClass.includes(myIndex)){
     this.setState({
        newClass: [...this.state.newClass, myIndex],
     });
 }
}

....

render () {
    const that = this;

    return (
        <div>
            {this.myArray().map((obj, index) => {
                const ifClass = that.state.newClass.includes(index) ? 'active' : '';
                return <Child
                          text={obj}
                          isClass={ifClass}
                          key={index}
                          onClick={(e) => that.handleClick(index,e)} />
            })}
       </div>
    )
  }

  ....

由于您还没有告诉您何时需要删除该类，因此请不要添加从数组中提取某些索引的步骤。

在react中添加基于索引数组的类

1 个答案: