本文旨在解决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 (
<>
<form>
<input type="text" value={name} onChange={handleChange} />
<br />
<input
onChange={handleChange}
type="radio"
value="Radio 1"
name="paka"
/>{'Radio 1'}
<input
onChange={handleChange}
type="radio"
value="Radio 2"
name="paka"
/>{'Radio 2'}
<input
onChange={handleChange}
type="radio"
value="Radio 3"
name="paka"
/>{'Radio 3'}
<input
onChange={handleChange}
type="radio"
value="Radio 4"
name="paka"
/>{'Radio 4'}
<br />
</form>
</>
);
}
export default Form;useEffect Hook 的第二个参数是一个依赖项数组。只有当数组中的值发生变化时，useEffect 才会执行。在这个例子中，我们监听 answer 的变化，并在 answer 发生变化时调用 props.onSubmit(answer)。同时将 props.onSubmit 添加到依赖项数组中，确保父组件传递的函数更新时，useEffect也能正确执行。
优化代码结构和无障碍性
除了解决数据传递问题，还可以对代码进行一些优化，使其更易读、更易维护，并提高无障碍性。
1. 使用 Fragment 替代不必要的 div
可以使用 <React.Fragment> 或简写 <> 来包裹多个元素，避免在 DOM 中引入不必要的 div 元素。
2. 使用 Label 增强无障碍性
为每个输入元素添加 <label> 标签，并使用 htmlFor 属性将 label 与对应的 input 元素关联起来。这有助于屏幕阅读器等辅助技术理解表单结构，提高用户体验。
3. 更清晰的命名
将父组件传递的事件处理函数命名为 handleSubmit，以区分于 input 元素原生的 onSubmit 事件。
示例代码
const { Fragment, useState } = React;
function App() {
function handleSubmit(data) {
console.log(`coming from the parent component ${data}`)
}
return (
<div className="App">
<Form handleSubmit={handleSubmit} />
</div>
);
}
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 (
<Fragment>
<section className="name">
<label htmlFor="name">Name</label>
<input
id="name"
type="text"
value={name}
onChange={handleChange}
/>
</section>
<section className="radios">
<label htmlFor="radio1">Radio 1</label>
<input
id="radio1"
onChange={handleChange}
type="radio"
value="Radio 1"
name="paka"
/>
<label htmlFor="radio2">Radio 2</label>
<input
id="radio2"
onChange={handleChange}
type="radio"
value="Radio 2"
name="paka"
/>
<label htmlFor="radio3">Radio 3</label>
<input
id="radio3"
onChange={handleChange}
type="radio"
value="Radio 3"
name="paka"
/>
<label htmlFor="radio4">Radio 4</label>
<input
id="radio4"
onChange={handleChange}
type="radio"
value="Radio 4"
name="paka"
/>
</section>
</Fragment>
);
}
const node = document.getElementById('root');
const root = ReactDOM.createRoot(node);
root.render(<App />);CSS 样式 (可选)
.name label { margin-right: 0.25em; }
.radios label:not(:first-child) { margin-left: 0.5rem; }
.radios { margin-top: 1em; }引入 React 和 ReactDOM (用于在线演示)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js"></script> <div id="root"></div>
总结
通过直接传递事件值或使用 useEffect Hook，可以解决 React 子组件向父组件传递表单数据时，因状态更新异步导致数据传递滞后的问题。同时，通过优化代码结构和增强无障碍性，可以提高代码的可读性、可维护性和用户体验。在实际开发中，应根据具体场景选择合适的解决方案。
