反应使用不同组件更新相同状态

Question

In my App I have an update function.

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
    })
},

I want to add a red2 ref and update the red state. How do I do this? Adding another red: would just overwrite the first one.

Edit:

I tried adding an update2 function. Which updates the state as expected. I only have one issue with the code. When I change red2 to some number, red1 doesn't change. It's value should be the state. I guess since I'm not calling red1 's update function its value doesn't get updated to match the current state.

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 representation:

<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" />

How do I get red1 and red2 to update the state and have the state reflected as their value whenever one of the two components changes.

Edit 2:

Color picker component:

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

You are only setting the defaultValue so when second colorPicker changes the value of red, firstColorPicker is not updated:

Instead of using

defaultValue ={this.props.val}

use

value={this.props.val}

Here is a working fiddle: http://jsfiddle.net/r7ktbmwo/