redux-form, Einstellung einer Feldsichtbarkeit basierend auf anderen Feldwerten

Question

Ich habe eine komplexe Form, bei der die Sichtbarkeit einiger Felder vom Wert anderer Felder abhängt. Wie wird die Sichtbarkeit eines Feldes basierend auf einem Wert eines anderen Feldes in Redux-Form festgelegt?

const renderField = ({ input, label, type, display='flex', meta: { touched, error } }) => (
    <div style={ { display: display }}> 
     <label>{label}</label> 
     <div> 
     <input {...input} type={type} placeholder={label}/> 
     {touched && error && <span>{error}</span>} 
     </div> 
    </div> 
) 



const renderMembers = ({ fields, meta: { touched, error } }) => (
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push({})}>Add Member</button> 
     {touched && error && <span>{error}</span>} 
    </li> 
    {fields.map((member, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Member" 
      onClick={() => fields.remove(index)}/> 
     <h4>Member #{index + 1}</h4> 
     <Field 
      name={`${member}.firstName`} 
      type="text" 
      component={renderField} 
      label="First Name"/> 
     <Field 
      name={`${member}.lastName`} 
      type="text" 
      component={renderField} 
      label="Last Name"/> 
     <Fields names={[ `${member}.firstName`, `${member}.lastName` ]} component={renderFields}/> 
     <FieldArray name={`${member}.hobbies`} component={renderHobbies}/> 
     </li> 
    )} 
    </ul> 
) 

Answer 1

Nehmen wir an, dass Sie ein Formular mit zwei Feldern haben:

const fields = [ 
    'foo', 
    'bar' 
] 
reduxForm(
{ 
    form: 'AwesomeForm', 
    fields 
} 
)(AwesomeForm) 

Um ein Feld Sichtbarkeit auf anderen Feldwert in der <AwesomeForm/> Komponente basiert zu steuern, können Sie festlegen display Wert mit Inline-Styles entspricht. Machen Sie einfach eine Überprüfung, die überprüft, ob ein anderer Wert die erforderlichen Bedingungen erfüllt. Wie:

export const AwesomeForm = (props) => { 
    return (
    <form onSubmit={props.handleSubmit}> 
     <TextField 
     {...props.fields.foo}  
     /> 
     <TextField 
     {...props.fields.bar} 
     style={{ 
      display: props.fields.name.foo === 'some value' ? 'none' : 'block', 
     }} 
     /> 

     <button 
     type='submit' 
     /> 

    </form> 

) 
}