Как я могу показать или скрыть поля в редукционной форме на основе некоторого условия, вызванного событием

Question

У меня есть следующая форма, которая содержит поле и полевой массив. Внутри FieldArray у меня есть поле выбора с двумя вариантами: Demo и Final. Когда выбрано Demo, я хотел бы скрыть поля Maintenance Period и Maintenance Type Fields, а когда выбрано Final, должно быть показано поле Demo Duration, предыдущие 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. Значение - «демо» или «окончательный». Я не знаю, как распространять это событие на другие поля, которые являются автономными:

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-форма уже крепление onChange пропеллера к вашему select полю: это один из реквизита вы проходящий с {...input} здесь:

<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. Однако вам нужно извлечь его с помощью connect, так как более новые версии redux-form не связывают вашу форму с каждым значением для повышения производительности.

В документах есть пример, который делает именно то, что вы хотите. В этом случае, когда отмечено поле «Электронная почта», отображается ввод для ввода адреса электронной почты и скрыт в противном случае.

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

Суть его украшает свою форму в два раза, один с reduxForm, а другой с ручным connect. В этом конкретном отображении из состояния в реквизиты вы можете использовать селектор, предоставленный redux-form, чтобы извлечь именно нужное значение формы и ввести его в качестве опоры.

Эта поддержка может быть передана компоненту, который вы хотите отобразить/скрыть.