Question

假设我必须<select>列出：

<select valueLink={this.linkState('parent')}>...</select>
<select valueLink={this.linkState('child')}>...</select>

子项选择取决于父选择（当选择父项时，子项将填充新选项，默认情况下其值设置为第一个选项。

问题在于，为了“重置”子选择，我必须设置组件状态以响应状态改变事件，这是非常气馁的AFAIK。那么如何处理这种情况呢？

Answer 1

如果我理解你的问题，这可能会有所帮助。

<强> JSFIDDLE

通过更改选择的选项，我们会在更改第一个选择时自动重置选项。我还使第二个选择完全依赖于第一个选择状态。

<select valueLink={this.linkState('select')}>
    {this.renderOptions(Object.keys(this.selectOptions))}
</select>
<select>
    {this.renderOptions(this.selectOptions[this.state.select])}
</select>

如果我误解了你的问题，请告诉我。

更新/编辑：

我想我更了解你的问题。在这种情况下，您与两个输入有一个复杂的关系，并且不能依赖this.linkState()给您的1：1关系。

在这种情况下，我向第一个选择添加了自定义onChange方法，并从中设置了第二个选择的值和初始值。由于第二个选择没有做任何想象，我们可以使用linkState就好了。

<强> UPDATED FIDDLE

<select onChange={this.handleMainSelectChange}>
    {this.renderOptions(Object.keys(this.selectOptions))}
</select>
<select valueLink={this.linkState('secondSelection')}>
    {this.renderOptions(this.selectOptions[this.state.mainSelection])}
</select>

点击处理程序

   handleMainSelectChange: function (event) {
    var value = event.target.value;

    this.setState({
        mainSelection: value,
        secondSelection: this.selectOptions[value][0]
    });

如何处理两个相互依赖的输入？

1 个答案: