为多个 div 响应 onClick 事件

Question

我正在尝试创建一个 onClick 事件，为每个元素添加一个类名，而无需写出三个不同的函数。但是，当单击其中一个时，所有三个都会触发该事件。如何修改它以便 onClick 仅适用于被点击的那个？

const userVote = React.createClass({

    getInitialState: function() {
        return {
          condition: false
        }
      },
      handleClick: function() {
        this.setState({
          condition: !this.state.condition
        });
      },


    render() {
        return(

                <div onClick={this.handleClick} className= { this.state.condition ? "positive active" : "positive"}></div>

                <div onClick={this.handleClick} className= { this.state.condition ? "neutral active" : "neutral"}>Not Sure</div>

                <div onClick={this.handleClick} className= { this.state.condition ? "negative active" : "negative"}></div>

        );
    }
});

Answer 1

正如您所说，您一次只希望一个 div 处于活动状态。您可以维护一个状态变量来跟踪活动的 div。

handleClick: function(divName) {
    this.setState({
        activeDiv: divName
    });
}

<div>
   <div onClick={() => this.handleClick('div1')} className= { this.state.activeDiv === 'div1' ? "positive active" : "positive"}>Div1</div>

   <div onClick={() => this.handleClick('div2')} className= { this.state.activeDiv === 'div2' ? "neutral active" : "neutral"}>Div2</div>

   <div onClick={() => this.handleClick('div3')} className= { this.state.activeDiv === 'div3' ? "negative active" : "negative"}>Div3</div>
</div>

我创建了一个名为的状态变量activeDiv，它将跟踪活动的 div，并且在应用时className您可以检查当前div是否处于活动状态。

这是工作的Plunker：Plunker（ES6语法）

JSFiddle（ES5 语法）

PS：您需要打开浏览器控制台才能看到结果。