ReactJSの特定の要素を選択して変更する

Question

ReactJSの2つのボタンの色を切り替えようとしています。私は選択されたボタンのアクティブ状態のプロパティを設定することはできますが、私の選択（calcXの）に基づいて別のボタンのスタイルを変更する方法はありません。

コードは脆いですが、私は非常に新しい反応を示しており、ベストプラクティスの指針を理解できます。 PSもフォームとボタンのための反応ブートストラップを使用しています。

const MyForm = React.createClass({ 

    handleChange(event, attribute) { 
     let eventValue = event.target.value; 
     if (attribute === 'calcX'){ 
      this.setState({active: true}); 
      this.setState({bsStyle: 'info'}); 
      let calcXBtn = ReactDOM.findDOMNode(this.refs.calcBtnGroup.refs.calcX); 
      calcXBtn.setState({bsStyle: 'default'}); 
     } 
     ... 
    } 

render() { 
    return (
      <Form onSubmit={this.handleSubmit} horizontal> 
       <FormGroup> 
        <ButtonGroup ref="calcBtnGroup"> 
         <Button active className='btn btn-info' ref="calcX" onClick={(event) => this.handleChange(event, 'calcX')}>Calculate X</Button> 
         <Button className='btn btn-default' ref="calcY" onClick={(event) => this.handleChange(event, 'calcY')}>Calculate Y</Button> 
        </ButtonGroup> 
      ... 

     ); 
    } 
}); 

module.exports = MyForm; 

Answer 1

コンポーネントの状態に関する要素（またはサブコンポーネント）に基づいてclassNameまたはスタイルを設定できます。三項演算子とES6テンプレートリテラルをここで使用するといいですね。

<Button ref="calcX" className=`btn ${this.state.active ? 'btn-info' : 'btn-default'}` onClick={(event) => this.handleChange(event, 'calcX')}>Calculate X</Button> 

これは、コンポーネントの状態に基づいてclassNameを設定しています。 <Button>コンポーネントは常にbtn classNameを持ちます。 state.activeがtrueの場合、クラスbtn-infoが追加されます。それ以外の場合はbtn-defaultが追加されます。

これで、唯一行う必要があるのは、handleChangeメソッドで状態を設定し、classNamesを適切にレンダリングすることです。

編集：ここではrefを使用する必要はありません。 refを使う必要はほとんどありません。 Reactイベント（onChange、onSubmitなど）を使用して状態の入力値を設定し、それらの値を入力内のvalueにレンダリングする必要があります。これらは制御されたコンポーネントと呼ばれます。あなたはそれについての公式ドキュメントで詳細を読むことができます：https://facebook.github.io/react/docs/forms.html