Reactjs 如何处理React窗体组件

我正在尝试制作一个简单的表单，但在10个示例/教程之后，我仍然不了解某些方面：）

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

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

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

类服务扩展组件{
状态={
reduxResponse:{}
}
componentDidMount（）{
this.props.getService（this.props.match.params.id）；
}
handleSubmit=service=>{this.props.saveService（service）}
render（）{
让{reduxResponse={}}=this.props；
返回(
信息
this.handleSubmit（服务）}/>
);
}
}
常量mapStateToProps=状态=>({
getService:PropTypes.func.isRequired，
saveService:PropTypes.func.isRequired，
reduxResponse:state.reduxResponse.payload
});
使用路由器导出默认值(
连接（MapStateTops，{getService，saveService}）（服务）
);

形式呢

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;

类ServiceBasicInfo扩展组件{
状态={
服务：{
姓名：“，
另一个字段：{}，
}
};
handleSubmit=事件=>{
道具。手推（服务）；
};
componentDidUpdate（prevProps、prevState、快照）{
if（this.props.service！=prevProps.service）{
this.setState（{service:this.props.service}）；
}
}
handleChange=事件=>{
event.persist（）；
this.setState（{[event.target.name]：event.target.value}）；
};
render（）{
让{service={}}=this.props；
返回(
空}
>
……其他领域
);
}
}
导出默认ServiceBasicInfo表单；

我无法确切理解如何将props.reduxResponse从服务传递到ServiceBasicInfo表单，然后编辑这些值，处理提交，以及提交后返回的值如何在ServiceBasicInfo表单中更新

---

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

我认为您的代码存在许多问题。我会尽力解决所有问题。 首先，

mapstatetops

将Redux状态映射到组件道具。您已将映射对象

reduxResponse

置于组件状态。在渲染中，还通过在值

{}

中赋值来覆盖映射的道具。创建

servicebasinform

时，您将

service

作为道具传递，但据我所知，这还没有在任何地方定义。这应该是什么？如果要传递

reduxResponse

，请执行以下操作：

然后可以通过以下方式在ServiceBasicInfo表单中访问：

const{reduxReponse}=this.props

至于“编辑”道具，你永远不应该这样做。组件的内部状态应保持其状态，而不是其支柱。如果希望ServiceBasicInfo表单在某一点与服务通信，则让服务传入回调函数，该函数具有ServiceBasicInfo表单的属性：

this.handleCallbackData（数据）}/>

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

既然你在使用ReDux，你也可以考虑跳过这些道具。相反，您可以将ServiceBasicInfoForm连接到redux状态，并在数据到达时更新此状态（使用mapDispatchToProps），并让外部服务组件侦听全局状态（使用MapStateTops）。
谢谢，同时我喜欢
组件DidUpdate（prevProps、prevState、snapshot）
我添加了回调函数，就像您的示例一样，现在看起来效果不错。。。但我认为我错过了一些东西->因为你正在使用ReDux，你也可以考虑跳过这些道具的组合。我更新了这个问题，但是我觉得它需要比这简单一点……而且如果我创建了<代码> const {ReDuxRePosis} =这个。代码>当你使用ReDux时，道具不更新，你也可以考虑跳过这些道具，整个RouDX的点是有一个全局状态。这消除了在多个组件层次结构上和下杂乱传递值的需要。所以我的意思是，与其在父/子之间传递数据和回调函数，不如让它们各自读/写全局状态。或者将所有道具传递给表单组件是个好主意？喜欢
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;