Javascript 父组件中的Reactjs按钮，用于提交子组件中的Redux表单

我有4个嵌套组件，

嵌套在

中，后者嵌套在

中，后者嵌套在

中

包含一个Redux表单，该表单带有

onSubmit={onSubmit}

和一个带有

type=“submit”

当前带有按钮的

片段：

const propTypes = {
  firstName: PropTypes.string,
  secondName: PropTypes.string
};

const defaultTypes = {
  firstName = " ",
  secondName = " "
};

const PollForm = ({
  firstName,
  secondName
}) => (
  <Form onSubmit={onSubmit}>
    .
    .
    <button type="submit">
      'Save'
    </button>
  </Form>
);

PollForm.propTypes = propTypes;
PollForm.defaultProps = defaultProps;

export default PollForm;

const propTypes={
名字：PropTypes.string，
第二个名称：PropTypes.string
};
常量默认类型={
firstName=“”，
secondName=“”
};
常数PollForm=({
名字，
第二名
}) => (
.
.
“保存”
);
PollForm.propTypes=propTypes；
PollForm.defaultProps=defaultProps；
导出默认表格；

我想将此按钮移动到

，这样

中的按钮与

中的按钮的行为方式完全相同，并提交表单

添加了一个新按钮的

片段：

const propTypes = {
  onSubmit: PropTypes.func, ...
};

const defaultTypes = {
  onSubmit: () = {}, ...
};

class Config extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this); ...
  }

  handleSubmit(data) {
    this.props.onSubmit(data);
  }

  render() {
    const {
    } = this.props;

    return (
      .
      .
      <button onClick={onSubmit}>
        'Save'
      </button>
    )
  }
}

const propTypes={
onSubmit:PropTypes.func。。。
};
常量默认类型={
onSubmit:（）={}。。。
};
类配置扩展组件{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）。。。
}
handleSubmit（数据）{
this.props.onSubmit（数据）；
}
render（）{
常数{
}=这是道具；
返回(
.
.
“保存”
)
}
}

---

如何传递

React组件中的
handleSubmit（data）
函数使用道具相互通信<代码>父->子-

通过

道具

，

子->父-/code>通过
回调道具
。另一种方法是使用新的
上下文API
。如果你有一个真正的深层嵌套结构会更好

贝娄，我展示了如何通过道具来完成


class CompB扩展了React.Component{
状态={
姓名：“约翰·多伊”，
电子邮件：“john@doe.com"
}
handleChange=e=>{
常量{name，value}=e.target；
this.setState（{[name]：value}）
}
handleSubmit=e=>{
e、 预防默认值（）；
this.submit（this.state）
}
提交=（数据）=>{
log（“已提交”，数据，+新日期（））；
this.props.onSubmit（数据）；
}
组件更新（旧道具）{
如果（！oldProps.shouldSubmit&&this.props.shouldSubmit）{
提交（本州）；
}
}
渲染（）{
const{name，email}=this.state；
返回(
名称
电子邮件
)    
}
}
类CompA扩展了React.Component{
状态={
应提交：错误，
}
提交=（）=>{
this.setState（{shouldSubmit:true}）
}
handleSubmit=（）=>{
this.setState（{shouldSubmit:false}）
}
渲染（）{
const{shouldSubmit}=this.state；
返回(
提交
)
}
}
ReactDOM.render（，document.querySelector（#root））
React组件使用道具相互通信<代码>父->子-

通过

道具

，

子->父-/code>通过
回调道具
。另一种方法是使用新的
上下文API
。如果你有一个真正的深层嵌套结构会更好

贝娄，我展示了如何通过道具来完成


class CompB扩展了React.Component{
状态={
姓名：“约翰·多伊”，
电子邮件：“john@doe.com"
}
handleChange=e=>{
常量{name，value}=e.target；
this.setState（{[name]：value}）
}
handleSubmit=e=>{
e、 预防默认值（）；
this.submit（this.state）
}
提交=（数据）=>{
log（“已提交”，数据，+新日期（））；
this.props.onSubmit（数据）；
}
组件更新（旧道具）{
如果（！oldProps.shouldSubmit&&this.props.shouldSubmit）{
提交（本州）；
}
}
渲染（）{
const{name，email}=this.state；
返回(
名称
电子邮件
)    
}
}
类CompA扩展了React.Component{
状态={
应提交：错误，
}
提交=（）=>{
this.setState（{shouldSubmit:true}）
}
handleSubmit=（）=>{
this.setState（{shouldSubmit:false}）
}
渲染（）{
const{shouldSubmit}=this.state；
返回(
提交
)
}
}
ReactDOM.render（，document.querySelector（#root））
您可以将表单提交状态和逻辑从
提升到
，并可以使用React上下文提供深入到
的表单状态和处理程序，例如：


从“React”导入React；
从“react dom”导入react dom；
const FormContext=React.createContext（）；
函数CompB（{children}）{
返回{children}；
}
函数CompC（{children}）{
返回{children}；
}
函数CompD（）{
返回(
{（{onSubmit，onChange，name}）=>{
返回(
姓名：
);
}}
);
}
类CompA扩展了React.Component{
onChange=（{target:{value}}）=>{
this.setState（{name:value}）；
};
onSubmit=事件=>{
event.preventDefault（）；
console.log（'提交名称：'，this.state.name）；
};
状态={
名称：“defaultName”，
onSubmit:this.onSubmit，
onChange:this.onChange，
};
render（）{
返回(