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参考并更新红色状态。我该怎么做呢？添加另一个red:只会覆盖第一个。{/ p>

Edit:

我尝试添加update2功能。其中按预期更新状态。我的代码只有一个问题。当我将red2更改为某个数字时，red1不会发生变化。它的价值应该是国家。我想因为我没有调用red1的{{1}}函数，所以它的值不会更新以匹配当前状态。

update

XML表示：

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

如何让<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:

Answer 1

您只设置defaultValue，因此当第二个colorPicker更改red的值时，firstColorPicker不会更新：

而不是使用

defaultValue ={this.props.val}

使用

value={this.props.val}

这是一个工作小提琴：http://jsfiddle.net/r7ktbmwo/

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

1 个答案: