在状态更改

Question

我有一个像这样的州，我设置active和class这样的标志：

constructor(props) {
        super(props);
        this.state = {'active': false, 'class': 'album'};
    }

  handleClick(id) {
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }

我有一个州名列表：

<div className={this.state.class} key={data.id} onClick={this.handleClick.bind(this.data.id}>
    <p>{data.name}</p>
</div>

在这里如何更改特定div的类名？

Answer 1

以下是我认为您尝试做的一个功能完整的示例（使用功能代码段）。

解释

根据您的问题，您似乎在state修改了所有元素的1个属性。这就是为什么当你点击一个时，所有这些都被改变了。

特别注意，状态跟踪的索引元素处于活动状态。点击MyClickable后，它会告知Container其索引，Container更新state，然后更新相应isActive的{​​{1}}属性第

实施例

MyClickable

class Container extends React.Component {
  state = {
    activeIndex: null
  }

  handleClick = (index) => this.setState({ activeIndex: index })

  render() {
    return <div>
      <MyClickable name="a" index={0} isActive={ this.state.activeIndex===0 } onClick={ this.handleClick } />
      <MyClickable name="b" index={1} isActive={ this.state.activeIndex===1 } onClick={ this.handleClick }/>
      <MyClickable name="c" index={2} isActive={ this.state.activeIndex===2 } onClick={ this.handleClick }/>
    </div>
  }
}

class MyClickable extends React.Component {
  handleClick = () => this.props.onClick(this.props.index)
  
  render() {
    return <button
      type='button'
      className={
        this.props.isActive ? 'active' : 'album'
      }
      onClick={ this.handleClick }
    >
      <span>{ this.props.name }</span>
    </button>
  }
}

ReactDOM.render(<Container />, document.getElementById('app'))

button {
  display: block;
  margin-bottom: 1em;
}

.album>span:after {
  content: ' (an album)';
}

.active {
  font-weight: bold;
}

.active>span:after {
  content: ' ACTIVE';
}

更新：“循环”

在回应关于“循环”版本的评论时，我认为问题是关于渲染<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script> <div id="app"></div>元素的数组。我们不会使用循环，而是使用map，这在React + JSX中很常见。以下内容应该给出与上面相同的结果，但它适用于一系列元素。

MyClickable