如何从按钮处理父组件中的 onsubmit 事件?

Question

在我的Parent组件中，有一个表单，对于提交按钮，它在子组件中被提及。

例如，在父组件(具有大量输入数据(中的超链接上，我显示了一个弹出窗口，这是一个子组件，在此弹出窗口中有一个提交按钮，该按钮也在子组件中。

如何通过子组件的按钮单击处理父组件OnSubmit方法？

Answer 1

您是否在父级中存储和维护了所有输入数据？如果否，则需要将输入数据存储在父组件中(或使用上下文 API 并在那里存储数据(

在父组件中创建handleSubmit，并将其作为回调函数从父组件传递到按钮单击组件，单击按钮时，调用回调函数以触发父组件中的handleSubmit函数。 简单演示

import React, { useState } from "react";
export default function App() {
// store all form data in this parent
const [formData, setFormData]= useState({})
const handleSubmit=() =>{
// handle and summit your formData here
}
return (
<div className="App">
{/* Crate a Form compoent and render it here */}
<Button onSubmit={handleSubmit}/>
</div>
);
}
export const Button = ({onSubmit}) =>{
return(
<button onClick={onSubmit}>Submit</button>
)
}

Answer 2

这是另一种使用 React props(属性( 调用父组件函数的解决方案。

[反应属性：][1]https://reactjs.org/docs/components 和道具.html

// Parent Component
import React from "react";
// import child component
class parent extends React.Component{
parentClassFunction = () => {
console.log("parent called")
};
render(){
<Child
parentClassFunction={this.parentClassFunction}
/>
}
}
export default parent
//    Child Component
class Child extends React.Component{
onClickSubmitButton = () =>{
this.props.parentClassFunction()
};
render(){
<button onClick={this.onClickSubmitButton}>CLICK</button>
}
}
export default Child