将动态表单序列化为对象数组

Question

Here is my initial state in redux

grains: [{grainId: "", amount: "0.0"}],

Im trying to get my form to serialize to something similar but I cant find a way to have grains be the outer object. Im wondering if its even possible or if I'll have to recreate the object manually. Or just get the state from the store.

My form looks like this:

<select
    name='grainId'
    value={this.props.value}
>
 ...options
</select>
<input
    type="text"
    name='amount'
    value={this.props.value}
 />

Then theres an add grain button which will add another object to the array in the state which will then render another section of the form on the page. Is there anyway to wrap each "Grain" section in a form element so that is serializes nicely?

If not can I just post the state from the store on form submit or is that bad practice?

Answer 1

Since you are already loading your initial form data from the redux state, I think it would make sense to have the form update the Redux state as it changes. With this approach every input chnage would trigger an update of the Redux state, which would then be passed down to the component (through mapStateToProps ), and cause a re-render showing the new value. That way you can make sure, in your reducer, that the state always has the shape you prefer ( {grains: [{grainId: "", amount: "0.0"}, etc... ] ).

Like you hinted, that would mean that when you finally submit, you are basically submitting the Redux form state (or at least the props passed down from it).

That could look something like this (runnable JSFiddle demo here ):

class App extends React.Component {
  renderGrains() {
    const {grains, changeGrain} = this.props;
    return grains.map((grain, index) => (
        <div key={ index }>
          <input
            type="text" 
            value={grain.grainId} 
            onChange={({target:{value}}) => changeGrain(index, 'grainId', value)}
            />
          <input key={ grain.grainId + 'amount' }
            type="number" 
            value={grain.amount} 
            onChange={({target:{value}}) => changeGrain(index, 'amount', value)}
            /> 
          <br />
        </div>
      ));
  }
  render() {
    const {addEmptyGrain, grains} = this.props;
    const onSubmit = (e) => {
        e.preventDefault();
      alert('submitting: \n' + JSON.stringify({grains}, null, 2));
    };
    return (
      <form>
        { this.renderGrains() }
        <button onClick={ (e) => { e.preventDefault(); addEmptyGrain();} }>Add grain</button><br />
        <button onClick={onSubmit}>Submit</button>
      </form>
    );
  }
}

where the reducer would look something like this:

const r1_initialState = { grains: [{grainId: "", amount: 0.0}] };
const reducer1 = (state = r1_initialState, action) => {
  switch(action.type) {
    case CHANGE_GRAIN: 
        const {index, key, newValue} = action;
        const grainsCopy = [...state.grains];
      grainsCopy[index][key] = newValue;
        return {...state, grains: grainsCopy};

    case ADD_EMPTY_GRAIN: {
      return {...state, grains: [...state.grains, {grainId: '', amount: 0.0}]}
    }
    default: 
      return state;
  }
};

If this seems like too much work, but you still want to keep the form data in the Redux state, there are libraries like redux-form , which handles the repetitive handling of onChange etc. for your forms.

Another option would be to load the initial state from Redux, but just use it to set the internal state of the component. Then handle all the form changes as a change to the component state. The same logic as the one in the example above, could be used for rendering the fields from an array.