如何将类添加到单击的列表项答案

【问题标题】：How to add a class to a clicked list item如何将类添加到单击的列表项
【发布时间】：2016-12-15 04:51:52
【问题描述】：

有人可以帮我在点击事件中向列表项添加一个类吗？到目前为止，我通过访问refs 属性进行了尝试：

<li className="existing-class" refs={ name }  onClick={ this.sort.bind(this, name) }>Foo</li>

@action sort = (name) => {
  this.refs.name.className="existing-class another-class"
}

但是，这不起作用..有人可以帮忙吗？

提前致谢！

【问题讨论】：

重复问题？ - stackoverflow.com/questions/36317933/…

标签： reactjs

【解决方案1】：

只是为了修补您现有的解决方案，请尝试正确访问动态 name 属性：this.refs[name].className="some-class"。

但是对于更React-y的解决方案，你应该在li的父组件中存储状态是否被点击，然后根据父组件的状态设置className。

【讨论】：

好的，我认为这不会影响我的回答。
还是不行..我试过this.refs[name].className="existing-class some-class但是some-class由于某种原因没有被添加...
所以尝试另一种存储状态的方法。这才是正确的方法。

【解决方案2】：

对，正确的方法是让元素的类由state 控制，而不是由点击事件控制。

例如<li className={'existing-class ' + this.state.clicked ? 'some-class' : ''}>Foo</li>

并让您的onClick 函数执行setState({clicked: true})

【讨论】：