React onClick event для нескольких divs

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: Вам нужно будет открыть консоль браузера, чтобы увидеть результаты.

Answer 2

Вы можете попробовать этот подход:

• Прежде всего, вам нужно возвращать только один DIV на Рендера вернуться, так. инкапсулировать его

• Изменить немного вашего condition на this.state

• Добавить другой параметр на функции 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> 
    ); 
} 

});