在状态变化时对变更类名做出反应 [英] react change class name on state change

问题描述

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

I have a state like this where I am setting active and class flag like this:

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'})
    }
  }

我有一个州名类别的项目清单：

And I have a list of items with class name from state:

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

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

Here how can I change the class name of particular div?

推荐答案

以下是我的完整功能示例相信你正在尝试（使用功能代码段）。

Below is a fully functional example of what I believe you're trying to do (with a functional snippet).

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

Based on your question, you seem to be modifying 1 property in state for all of your elements. That's why when you click on one, all of them are being changed.

特别注意，状态跟踪的哪个元素处于活动状态的索引。单击 MyClickable 时，它会告诉 Container 其索引， Container 更新州，然后更新相应 MyClickable isActive 属性c $ c> s。

In particular, notice that the state tracks an index of which element is active. When MyClickable is clicked, it tells the Container its index, Container updates the state, and subsequently the isActive property of the appropriate MyClickables.

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>

在回复有关循环版本的评论时，我相信问题是关于渲染一个 MyClickable 元素的数组。我们不会使用循环，但 map ，这在React + JSX中是典型的。以下应该给出与上面相同的结果，但它适用于元素数组。

In response to a comment about a "loop" version, I believe the question is about rendering an array of MyClickable elements. We won't use a loop, but map, which is typical in React + JSX. The following should give you the same result as above, but it works with an array of elements.

// New render method for `Container`
render() {
  const clickables = [
    { name: "a" },
    { name: "b" },
    { name: "c" },
  ]

  return <div>
      { clickables.map(function(clickable, i) {
          return <MyClickable key={ clickable.name }
            name={ clickable.name }
            index={ i }
            isActive={ this.state.activeIndex === i }
            onClick={ this.handleClick }
          />
        } )
      }
  </div>
}

这篇关于在状态变化时对变更类名做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！