Question

我创建了父组件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}/>
.......................

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

如何获取该表单数据

Answer 1

数据在 React 中从上到下流动。为了完成您想要的操作，您必须给父组件一个新的状态，并将update函数传递给子组件：

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

现在，子组件会同时更新其状态以及父组件的状态。

编辑重用事件可能会有一些错误，所以我更新了上面的答案。

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

1 个答案: