本文旨在解决React中子组件表单数据实时传递给父组件的问题，特别是针对单选按钮这类需要onChange事件触发数据传递的场景。我们将探讨如何利用事件对象和useEffect Hook，实现数据同步，并提供优化后的代码示例，包括改进的组件结构和无障碍性增强，帮助开发者构建更高效、更易维护的React应用。
通过 onChange 事件传递数据
在React中，将子组件的表单数据传递给父组件，尤其是在每次数据变更时（例如，单选按钮的选择），可以通过 onChange 事件来实现。问题的核心在于，如何在 onChange 事件处理函数中正确地获取并传递最新的数据。
常见的错误做法是在 handleChange 函数中，先使用 setName 和 setAnswer 更新 state，然后立即使用 props.onSubmit(answer) 传递 answer。由于React的状态更新是异步的，answer 的值可能尚未更新，导致传递的是旧值。
有两种主要的解决方案：
1. 直接传递事件值
最简单的解决方案是直接将事件对象中的 value 传递给父组件。
function handleChange(event) {
const { value } = event.target;
setName(value);
setAnswer(value);
props.onSubmit(value); // 直接传递 event.target.value
}这种方法避免了依赖异步更新的 state，确保传递的是最新的值。
2. 使用 useEffect Hook 监听 state 变化
另一种方法是使用 useEffect Hook 监听 answer state 的变化，并在 answer 发生变化时调用父组件的 onSubmit 函数。
import React, { useState, useEffect } from 'react';
function Form(props) {
const [name, setName] = useState('');
const [answer, setAnswer] = useState('');
function handleChange(event) {
setName(event.target.value);
setAnswer(event.target.value);
}
useEffect(() => {
props.onSubmit(answer);
}, [answer, props.onSubmit]); // 只有 answer 或 onSubmit 变化时才执行
return (
<>
);
}
export default Form;useEffect Hook 的第二个参数是一个依赖项数组。只有当数组中的值发生变化时，useEffect 才会执行。在这个例子中，我们监听 answer 的变化，并在 answer 发生变化时调用 props.onSubmit(answer)。同时将 props.onSubmit 添加到依赖项数组中，确保父组件传递的函数更新时，useEffect也能正确执行。
优化代码结构和无障碍性
除了解决数据传递问题，还可以对代码进行一些优化，使其更易读、更易维护，并提高无障碍性。
1. 使用 Fragment 替代不必要的 div
可以使用
2. 使用 Label 增强无障碍性
为每个输入元素添加
3. 更清晰的命名
将父组件传递的事件处理函数命名为 handleSubmit，以区分于 input 元素原生的 onSubmit 事件。
示例代码
const { Fragment, useState } = React;
function App() {
function handleSubmit(data) {
console.log(`coming from the parent component ${data}`)
}
return (
);
}
function Form({ handleSubmit }) {
const [name, setName] = useState('');
const [answer, setAnswer] = useState('');
function handleChange(event) {
const { value } = event.target;
setName(value);
setAnswer(value);
handleSubmit(value);
}
return (
);
}
const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(CSS 样式 (可选)
.name label { margin-right: 0.25em; }
.radios label:not(:first-child) { margin-left: 0.5rem; }
.radios { margin-top: 1em; }引入 React 和 ReactDOM (用于在线演示)
总结
通过直接传递事件值或使用 useEffect Hook，可以解决 React 子组件向父组件传递表单数据时，因状态更新异步导致数据传递滞后的问题。同时，通过优化代码结构和增强无障碍性，可以提高代码的可读性、可维护性和用户体验。在实际开发中，应根据具体场景选择合适的解决方案。
