React Reduction DOM要素の有効/無効の扱い

Question

他のDOM要素の状態に基づいて特定のDOM要素を有効/無効にする必要があるフォームがあります。例えば、ラジオボタンをクリックして、ドロップダウンを有効にする必要があります。

これを実装するには、ラジオがクリックされた後にレデューサーが状態を変更してからドロップダウンを有効/無効にするときに、

redux-formは決してこのプロセスを単純化しますか？ react-reduxセットアップでこれを実装するベストプラクティスは何ですか？

Answer 1

条件入力には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入力は、要素を非表示にするスタイリングしました。私はあなたが必要とする条件に応じて、trueまたはfalseを返す3値関数を使用する方法で、あなたが無効にした場合と同じようにこれを行うことができると思います。

Answer 2

Reduxフォームは、ストア内のすべてのものを追跡します。 （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"}/> 

使用しています。