選擇並ReactJS

Question

我想切換的兩個按鈕的顏色ReactJS更改特定元素。我可以設置所選按鈕的活動狀態屬性確定，但是我無法根據我的選擇（calcX）選擇如何更改另一個按鈕（calcY）的樣式。

的代碼是脆的，但我非常新的反應和最佳做法的任何指針將不勝感激。 PS也是我使用窗體和按鈕的react-bootstrap。

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或style。這裏使用三元運算符和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方法的類名會被適當地渲染。

編輯：它不是真的有必要在這裏使用裁判。幾乎沒有必要使用refs。您希望使用React事件（onChange，onSubmit等）在狀態上設置輸入值，並在輸入中顯示value中的值。這些被稱爲受控組件。你可以在官方文檔中閱讀更多關於它的信息：https://facebook.github.io/react/docs/forms.html