関数の戻り値に応じてdomを更新する

Question

アクティブな要素が1つしかないリストを作成しようとしています。状態はちょうどそうであるように更新されますが、isActive関数は最初はアクティブになり、状態が変化するとアクティブになりません。動作しませんES6でhttps://codepen.io/anon/pen/mRWqQX

マイコード：ここで

は、私がES5で何をしたいの実施例です。 isActive関数は状態の変化に対してトリガしません。 setState functionを使用して反応に

import React from 'react' 

class RadioButtons extends React.Component { 
    constructor() { 
    super(); 
    this.isActive = this.isActive.bind(this); 

    this.state = { 
     selected: "" 
    } 
    } 
    isActive(value) { 
    if (this.state.selected === value) 
     return 'active'; 
    else 
     return null; 
    } 
    makeActive(value) { 
    this.state = { 
     selected: value 
    } 
    } 
    render(){ 
    return (
     <div> 
     <div className={this.isActive("option1")} onClick={this.makeActive.bind(this, 'option1')} > option 1</div> 
     <div className={this.isActive("option2")} onClick={this.makeActive.bind(this, 'option2')} > option 2</div> 
     <div className={this.isActive("option3")} onClick={this.makeActive.bind(this, 'option3')} > option 3</div> 
     </div> 
    ) 
    } 
} 

export default RadioButtons; 

Answer 1

あなたは状態を変更します。

this.setState({selected: value}); 

this.stateに新しい価値を再割り当てすることは再レンダリングトリガーされません。

Answer 2

代わりの方法は、メソッドを使用したいthis.stateプロパティ

this.setState({selected: value}); 

設定も再レンダリングやもののように、いくつかの追加機能がありません。

Answer 3

これは動作するはずです。

makeActive(value) { 
    this.setState({ 
     selected: value 
    }) 
    }