reactjs - 如何处理 React Forms 组件

问题描述

我正在尝试制作一个简单的表格，但是在 10 个示例/教程之后，我仍然不明白某些方面:)

场景：我正在使用 redux action/reducer 获取数据，因此模型以这种形式出现在 props.reduxResponse 中：

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

我获取数据的主要组件（我希望我可以进行更新调用:)）：

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)
);

和表格

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;

我不明白如何将 props.reduxResponse 从 Service 传递到 ServiceBasicInfoForm，然后编辑这些值，处理提交以及提交后返回的值将如何在 ServiceBasicInfoForm 中更新

这是一个示例，因为服务将包含约 4 个表单。

标签： reactjsformsredux

解决方案

我认为您的代码存在许多问题。我会尝试解决所有这些问题。首先，mapStateToProps将 Redux 状态映射到组件 props。您已将映射对象reduxResponse置于组件状态。在您的渲染中，您还通过分配 value 来覆盖映射的道具{}。创建时ServiceBasicInfoForm，您将传递service作为道具，但据我所知，这尚未在任何地方定义。这应该是什么？如果你想通过reduxResponse，那么就这样做：

<ServiceBasicInfoForm reduxResponse= {reduxResponse}/>

然后可以在 ServiceBasicInfoForm 中访问：

const {reduxReponse} = this.props;

至于“编辑”道具 - 你永远不应该这样做。组件的内部状态应该保持它的状态，而不是它的 props。如果您希望 ServiceBasicInfoForm 在某个时刻与 Service 通信，让 Service 传入一个回调函数，该回调函数对 ServiceBasicInfoForm 有一个 prop：

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

现在，如果您需要根据是否已提交来以不同方式呈现 ServiceBasicInfoForm，您可以将其置于 ServiceBasicInfoForm 的本地状态中，并根据其本地状态呈现组件。

由于您使用的是 redux，因此您也可以考虑一起跳过这些 props 的传递。相反，您可以将 ServiceBasicInfoForm 连接到 redux 状态并在数据到达时更新它（使用 mapDispatchToProps），并让外部 Service 组件监听全局状态（使用 mapStateToProps）。

reactjs - 如何处理 React Forms 组件

问题描述

解决方案

推荐阅读