如何处理 React Forms 组件

Question

I'm trying to make a simple form but after 10 examples/tutorials I still not understand some aspects:)

Scenario: I'm getting data with redux action/reducer so the model is coming in props.reduxResponse in this form:

reduxResponse: { 
    name: "123", 
    anotherField: "456"
}

the main component where I get data ( and I hope I can make the update call:) ):

class Service extends Component {

  state = {
    reduxResponse: {}
  }

  componentDidMount() {
    this.props.getService(this.props.match.params.id);
  }

  handleSubmit = service => { this.props.saveService(service) }

  render() {
    let { reduxResponse = {} } = this.props;

    return (
      <div>
        <h3>Infos</h3>
        <ServiceBasicInfoForm 
          service = { reduxResponse }
          handleSubmit={(service) => this.handleSubmit(service)}/>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  getService: PropTypes.func.isRequired,
  saveService: PropTypes.func.isRequired,
  reduxResponse: state.reduxResponse.payload
});
export default withRouter(
  connect(mapStateToProps, { getService, saveService })(Service)
);

and the form

class ServiceBasicInfoForm extends Component {
  state = {
    service: {
      name: "",
      anotherField: {},
    }
  };

  handleSubmit = event => {
    props.handleSubmit(service); 
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
    if(this.props.service != prevProps.service){
      this.setState({ service: this.props.service });
    }
  }

  handleChange = event => {
    event.persist();
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {

    let { service = {} } = this.props;

    return (
      <div>
        <ValidatorForm
          ref="form"
          onSubmit={this.handleSubmit}
          onError={errors => null}
        >
          <Grid container spacing={6}>
            <Grid item md={4} spacing={6}>
              <TextValidator
                value={this.state.service.name}
                ..... other props
              />
            </Grid>

            ..... other fields

          </Grid>
        </ValidatorForm>
      </div>
    );
  }
}

export default ServiceBasicInfoForm;

and I can't understand exactly how can I pass the props.reduxResponse from Service to ServiceBasicInfoForm, then edit those values, handle submit and how the returned values after submit will be updated in ServiceBasicInfoForm

This is a sample example because the Service will contain ~4 forms.

Answer 1

I think there are a number of issues with your code. I'll try to address all of them. First of all, mapStateToProps maps the Redux state to the component props. You have put the mapped object reduxResponse in your component state. In your render, you're also overwriting the mapped prop by assigning in the value {} . When creating ServiceBasicInfoForm , your passing service as a prop, but as far as I can see this has not been defined anywhere. What is this supposed to be? If you want to pass reduxResponse , then just do that:

<ServiceBasicInfoForm reduxResponse= {reduxResponse}/>

This would then be accessible in ServiceBasicInfoForm with:

const {reduxReponse} = this.props;

As for 'editing' props - you should never do this. The internal state of a component should be kept its state, not its props. If you want ServiceBasicInfoForm to communicate back to Service at a certain point, let Service pass in a callback function has a prop to ServiceBasicInfoForm:

<ServiceBasicInfoForm reduxResponse={reduxResponse} callback={data => this.handleCallbackData(data)}/>

Now, if you need ServiceBasicInfoForm to be rendered differently based on whether a submit has been made, you could just put this in the local state of ServiceBasicInfoForm, and render the component based on its local state.

Since you're using redux, you may also consider skipping the passing of these props alltogether. Instead you can connect ServiceBasicInfoForm to the redux state and update this when data arrives (using mapDispatchToProps), and let the the outer Service component listen to the global state (using mapStateToProps).