一部の値の入力ベースが変更されました

Question

function Form(props) { 
    var objBarCode; 
    if (props.record && props.record.type === "STOCK") { 
    objBarCode = < TextInput source="barcode" label="Bar Code"/>; 
    } 
    return (
    < SimpleForm {...props} > 
     < TextInput source="item" label="item" validate={[required]}/> 
     < TextInput source="name" label="Name" validate={[required]}/> 
     < SelectInput 
     source="type" 
     label="Type" 
     validate={[required]} 
     choices={[ 
      { id: "STOCK", name: "Stock" }, 
      { id: "RMK", name: "Remark" }, 
      { id: "SVR", name: "Services" } 
     ]} 
    /> 
     {objBarCode} 
    </SimpleForm> 
); 
} 

いくつかの入力が一部の条件でのみ表示されるように、どうすれば実現できますか？上記のコードは、条件値が変更されたときに再レンダリングしません。目標は、Textinputバーコードが表示されるときにだけ表示されることでした。type="STOCK"

Answer 1

これは簡単ではありません。あなたはreduxフォーム状態から条件の現在の値を取得し、それに応じて表示するものを決定するカスタム入力を実装する必要があります。

私はあなたがそれを再利用できるようにラッパーまたはHOCとして作成することをお勧めします。

あなたは値を取得する方法については、redux形式とredux形式のドキュメントでフォームキーを見つけるために、Rest-on-restソースを調べる必要があります。

しかし、これは非常に一般的なシナリオであるように、私たちはそれを容易にするために何ができるかわかります

私達はちょうどaor-dependent-inputをリリース！それがあなたのために働くかどうか私たちに知らせてください:)