Reactjs 将表单数据从子组件发送到父组件

我创建了父组件CommentBox.js和子组件CommentForm.js

#CommentForm.js
....
const [formData, setFormData] = useState({
content: '',
});
const { content } = formData;

const onChange = (e) =>{
   setFormData({ ...formData, [e.target.name]: e.target.value }); 
}
.....

#CommentBox.js
...................
< CommentForm onSubmit={onSubmitHandler}/>
.......................

#CommentForm.js
....
常量[formData，setFormData]=useState({
内容：“”，
});
const{content}=formData；
const onChange=（e）=>{
setFormData（{…formData，[e.target.name]：e.target.value}）；
}
.....
#CommentBox.js
...................

.......................

我想在CommentBox.js中获取“内容”数据

---

我如何才能得到formdata，在React中数据从上到下流动。为了实现您想要的功能，您必须给父组件一个新的状态，并将更新函数传递给子组件：

// CommentBox.js
// New state variable to save the data
const [ data, setData ] = useState({});

<CommentForm onSubmit={onSubmitHandler} setData={setData} />

// CommentForm.js
const onChange = (e) => {
   e.preventDefault();
   const name = e.target.name;
   const value = e.target.value;

   setFormData({ ...formData, [name]: value });
   // Updates the state of the parent component
   props.setData(data => ({ ...data, [name]: value })); 
}

//CommentBox.js
//用于保存数据的新状态变量
const[data，setData]=useState（{}）；
//CommentForm.js
const onChange=（e）=>{
e、 预防默认值（）；
const name=e.target.name；
常量值=e.target.value；
setFormData（{…formData，[名称]：值}）；
//更新父组件的状态
setData（data=>（{…data，[name]：value}））；
}

现在，子组件将更新其状态以及父组件的状态

编辑

---

重用事件时可能会出现一些错误，因此我更新了上面的答案。

我遇到了一系列错误，如TypeError:e.当我尝试在文本区域中键入时，target为null。没有。我无法编写和提交表单。重用事件时可能会出现问题。我更新了我的答案。