フィールドは、イベントによってトリガされた条件に基づいてレピュックス形式で表示または非表示にすることができます

Question

フィールドとフィールド配列を含む次のフォームがあります。 FieldArray内には、選択フィールドがあり、デモとファイナルの2つのオプションがあります。デモが選択されている場合、メンテナンス期間とメンテナンスタイプのフィールドを非表示にしたいと思います。最終を選択すると、デモ期間フィールドが表示され、前の2フィールドは非表示になります。コードは以下の通りです：

const renderLicenses = ({ fields }) => (
    <ul className="list-unstyled"> 
     <li> 
      <button type="button" className="btn btn-info" onClick={() => fields.push({})}>Add License</button> 
     </li> 
     {fields.map((license, index) => 
      <li key={index}> 
       <button 
        type="button" 
        title="Remove license" 
        onClick={() => fields.remove(index)}/> 
       <h4>License #{index + 1}</h4> 
       <Field 
        name={`${license}.licenseName`} 
        type="text" 
        component={renderSelectLicenses} 
        collectionOfOptions={LICENSES} 
        label="Please select license name"> 
       </Field> 
       <Field 
        name={`${license}.licenseType`} 
        type="text" 
        component={renderSelectLicenseType} 
        label="Please select license type"/> 
       <Field 
        name={`${license}.validFrom`} 
        type="text" 
        component={renderCalendar} 
        label="Valid from"/> 
       <Field 
        name={`${license}.validTo`} 
        type="text" 
        component={renderCalendar} 
        label="Valid to"/> 
       <Field 
        name={`${license}.demoDuration`} 
        type="text" 
        component={renderField} 
        label="Demo duration"/> 
       <Field 
        name={`${license}.maintenancePeriod`} 
        type="text" 
        component={renderField} 
        label="Maintenance period"/> 
       <Field 
        name={`${license}.maintenanceType`} 
        type="text" 
        component={renderSelectMaintenanceTypes} 
        collectionOfOptions={MAINTENANCE_OPTIONS} 
        label="Maintenance type"/> 
      </li> 
     )} 
    </ul> 
); 

これはrenderSelectLicenseTypeコードです：

import React from 'react'; 
    const renderSelectLicenseType = ({input, label}) => (
    <div className="form-group"> 
     <label>{label}</label> 
     <select className="form-control" {...input}> 
      <option disabled>Please select a license type</option> 
      <option value="demo">Demo</option> 
      <option value="final">Final</option> 
     </select> 
    </div> 
    ); 

export default renderSelectLicenseType; 

基本的に、私は選択にonChangeイベントがあり、非表示/ event.target場合、他のフィールドを表示したいと思います。値は 'demo'または 'final'です。私は自己完結型の他のフィールドにこのイベントを伝播する方法を知らない：

const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div className="form-group"> 
    <label>{label}</label> 
    <div> 
     <input className="form-control" {...input} type={type} placeholder= {label}/> 
     {touched && error && <span>{error}</span>} 
    </div> 
</div> 

）;

render() { 
     const {handleSubmit, invalid, submitting} = this.props; 
     return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} style={tempStyles}> 
       <Field name="machineID" type="text" component={renderField} label="Machine ID"/> 
       <FieldArray name="licenses" component={renderLicenses} /> 
       <div className="form-group"> 
        <RaisedButton type="submit" label="Add new machine" primary={true} disabled={invalid || submitting}/> 
       </div> 
      </form> 
     ) 
    } 

export default reduxForm({ 
    form: 'addMachine', 
    validate: validate 
})(AddMachineMaster); 

私はReduxの-フォームに新しい、これを理解しようとしている困難な時期を持っています：

最後に、これはフォーム全体を保持しているマスター・コンポーネントのコードです。ありがとうございました！

Answer 1

Reduxの形式は、すでにあなたのselectフィールドにonChange支柱を取り付けている。

<select className="form-control" {...input}> 
    <option disabled>Please select a license type</option> 
    <option value="demo">Demo</option> 
    <option value="final">Final</option> 
</select> 

をお使いの値はReduxのストアに既にあることを意味している：それはあなたがここに{...input}で渡している小道具の一つです。ただし、新しいバージョンのredux-formはフォームをすべての値で接続してパフォーマンスを向上させるため、connectを使用して抽出する必要があります。

あなたが望むものを正確に行う例があります。この場合、電子メールフィールドがチェックされると、電子メールアドレスを入力する入力が表示され、それ以外の場合は非表示になります。

http://redux-form.com/6.5.0/examples/selectingFormValues/

その要旨は、二回reduxFormと1と手動connectで別のフォームを飾っています。状態から小道具へのこの特定のマッピングでは、redux-formによって提供されるセレクタを使用して、フォームの値を正確に抽出し、小道具として注入することができます。

その小道具は、表示/非表示にしたいコンポーネントに渡すことができます。