フィールド値に基づいて動的に還元フォームを変更します

Question

私は3つのフィールドで構成されるフォームを持っています。フィールド＃1の値がtrueの場合、フィールド＃3はフォームから削除する必要があります。フィールド＃1の値がfalseの場合は、フィールド＃3をフォームに戻す必要があります。

私はこれを行うのは簡単で、きれいな方法を見つけることはできません。

還元型サイトの例の1つで、フォームのコンテナの状態に基づいてフォームを動的に構築する方法が説明されています。コンテナはフィールド配列をフォームコンポーネントにpropとして渡し、フィールド配列を制御する入力フィールドはコンテナ内にあります。フィールド＃1はフォーム内になければならないので、私は実際にはそのアプローチを使用することはできません。

フィールド＃3をCSSで単純に非表示にしようとしましたが、検証ルールはどのフィールドが非表示かどうかを認識しません。

Answer 1

フォームの構造を変更する必要があり、単にフィールドを非表示にしたくない場合は、多分これはあなたのために動作しますが：

render() { 
    const {yourField1, yourField3} = this.props; 
    <div> 
    <Input type="text" {...yourField1} /> 
    { !yourField1.value && 
     <Input type="text" {...yourField3} />} 
    </div>