React Redux處理DOM元素enable-disable的方式

我有一個表單，我必須根據其他DOM元素的狀態啓用/禁用某些DOM元素。對於例如我有一個單選按鈕，點擊應該啓用下拉菜單。React Redux處理DOM元素enable-disable的方式

現在爲了實現這個，我應該再次按照配置動作時的方式來處理收音機被點擊，然後在縮小器內改變狀態，然後啓用/禁用下拉菜單？

Redux-form以任何方式簡化了這個過程嗎？在反應還原設置中實施這個最佳實踐是什麼？

2016-05-13 Ranjith Nair

即使其他軟件包爲我提供了一個「簡化」版本，爲特殊情況做同樣的事情，我仍會堅持使用我的整個應用程序中的Redux模式。但那只是我。 – hansn

我使用redux-form作爲條件輸入。例如，我有一個複選框，當選中時，應該顯示一個文本區域來解釋真實的輸入。看起來像這樣：

 <div className="checkbox"> 
      <label for="trueInput"> 
      <input type="checkbox" {...trueInput} /> 
      Is this input true?</label> 
     </div> 

     <div className={!trueInput.value ? 'conditional-input' : ''}> 
      <label for="trueInputExplanation">Why is this input true?</label> 
      <input className="form-control" {...trueInputExplanation} /> 
     </div>

類.conditional-input具有樣式來隱藏元素。我想你可以用同樣的方式爲殘疾人做，通過使用一個三元函數返回true或false，取決於你需要的條件。

來源

2016-05-13 18:51:06

Redux Form會跟蹤商店中的所有內容。（很容易看到Redux Chrome開發工具發生了什麼。）假設我有一個主複選框，其啓用允許我切換從屬複選框。所以我想把主狀態從表格中讀入道具：

const mapStateToProps = (state) => { 
    const isMasterChecked = state.mySetting.isMasterChecked; 
    const form_mySetting = state.form.mySetting; 
    const form_isMasterChecked = form_mySetting ? form_mySetting.values.isMasterChecked : null; 

return { 
    isMasterChecked, 
    form_isMasterChecked 
}

};

，然後形式你有

const {isMasterChecked, form_isMasterChecked} = props; 

const shouldDisable_slaveCheckbox=() => { 
    if (form_isMasterChecked == null) return isMasterChecked; // the form is not fully built yet, so use "real" store value instead of reading the form via store 
    return form_isMasterChecked; 
}; 

<Field name="isSlaveChecked" component="input" type="checkbox" disabled={shouldDisable_slaveCheckbox() ? "" : "disabled"}/>

儘量少用，因爲這種做法可能會導致整個形式重繪。

來源

2016-11-20 00:40:36 pdavidow

React Redux處理DOM元素enable-disable的方式

回答

相關問題