Блог

У меня сложная форма, в которой видимость некоторых полей зависит от значения других полей. Как настройка видимости поля на основе значения другого поля выполняется в redux-form?

 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 amp;amp; error amp;amp; <span>{error}</span>}
      </div>
    </div>
)



const renderMembers = ({ fields, meta: { touched, error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>Add Member</button>
      {touched amp;amp; error amp;amp; <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>
)
  

Предположим, что у вас есть форма с 2 полями:

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

Чтобы управлять видимостью поля на основе другого значения поля в <AwesomeForm/> компоненте, вы можете установить соответствующее display значение с помощью встроенных стилей. Просто сделайте проверку, которая проверяет, удовлетворяет ли другое значение необходимым условиям. Нравится:

 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>

  )
}