大型React-Redux表单应用

Question

I've been working on rewriting one of the modules in my company using react, the module is a single page composable of 4-5 different forms, selections made in each form are then determine the appeareance of the next form step.

There are a lot of "static" input fields which not affecting the visual ui state of the app, but are required to send to the server, other inputs are changing the ui state.

I'm looking for the right approach for this type of apps, since it seems attaching onChange event to every single input (there are more than 100 inputs total in the whole page). I've used react-redux-forms plugin, but it is too much of a blockbox for me, since I need to have direct access to the state and make decision based on it. I would preferer hacing more control over the state.

Is the right solution to bind onChange event for every input? Or is there a better approach.

Answer 1

We do this with redux-form quite easily. Because everything's maintained in the fields prop, you could do something like this:

const Form = ({
  fields,
  handleSubmit,
  saveForm
}) => (
  <form onSubmit={handleSubmit(saveForm)}>
    <fieldset>
      <input type="text" {...fields.hasAlternativeDelivery} />
    </fieldset>
    {fields.hasAlternativeDelivery.value === true &&
      <fieldset>
        {/* more fields go here */}
      </fieldset>
    }
  </form>
);

We then conditionally validate certain fieldsets like this . So, to answer your question: you shouldn't rely on change events to hide / show certain fields, this goes against the very nature of React (React is declarative, what you're describing is an imperative way of doing things). Instead, figure out what state (/props) should lead to which UI.