反應更新不同組件的相同狀態

Question

在我的應用程序中，我有一個update函數。

update: function() { 
    this.setState({ 
     red:this.refs.red1.refs.range.getDOMNode().value 
     green:this.refs.green1.refs.range.getDOMNode().value, 
     blue:this.refs.blue1.refs.range.getDOMNode().value 
    }) 
}, 

我想添加一個red2 ref並更新紅色狀態。我該怎麼做呢？增加另一個red:只會覆蓋第一個。

Edit:

我嘗試添加一個update2功能。按預期更新狀態。我只有一個代碼問題。當我將red2更改爲某個數字時，red1不會更改。它的價值應該是國家。我想因爲我不打電話red1的update函數它的值不會更新以匹配當前狀態。

update2: function() { 
    this.setState({ 
     red: this.refs.red2.refs.range.getDOMNode().value, 
     green: this.refs.green2.refs.range.getDOMNode().value, 
     blue: this.refs.blue2.refs.range.getDOMNode().value, 
    }) 
}, 

XML表示：

<ColorPicker ref="red1" min={0} max={255} step={1} val={this.state.red} update={this.update} /> 
<ColorPicker ref="red2" min={0} max={255} step={1} val={this.state.red} update={this.update2} type="number" /> 

如何獲得red1和red2更新狀態和有國家作爲反映其價值時的兩個組成部分的變化之一。

Edit 2:

顏色選擇器組件：

var ColorPicker = React.createClass({ 
    propTypes: { 
     min: React.PropTypes.number, 
     max: React.PropTypes.number, 
     step: React.PropTypes.number, 
     val: React.PropTypes.number, 
     label: React.PropTypes.string, 
     update: React.PropTypes.func.isRequired, 
     type: React.PropTypes.oneOf(['number', 'range']), 
    }, 
    getDefaultProps: function() { 
     return { 
      min: null, 
      max: null, 
      val: 0, 
      step: 1, 
      label: '', 
      type: 'range', 
     } 
    }, 
    render: function() { 
     return (
      <div> 
       <input 
        ref="range" 
        type={this.props.type} 
        min={this.props.min} 
        max={this.props.max} 
        step={this.props.step} 
        defaultValue={this.props.val} 
        onChange={this.props.update} 
       /> 
      </div> 
     ) 
    } 
}) 

Answer 1

你只設置默認值，所以當第二色器改變的紅色值，不更新firstColorPicker：

而不是使用

的

defaultValue ={this.props.val} 

使用

value={this.props.val} 

這裏是工作提琴：http://jsfiddle.net/r7ktbmwo/