如何處理相互依賴的兩個輸入？

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] 
    });