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是否处于活动状态。< / p>

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

JSFiddle（ES5语法）

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

Answer 2

您可以尝试这种方法：

首先，你需要在渲染回归时只返回一个div，所以。封装它
在this.state

condition

在onClick函数

类似的东西：

const userVote = React.createClass({
getInitialState: function() {
    return {
      div1: false,
      div2: false,
      div3: false
    }
  },
  handleClick: function(divNumber) {
    this.setState({
      divNumber: !this.state.condition
    });
  },


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

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

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

}）;

为多个div执行onClick事件

2 个答案: