React：在子组件表单（单选按钮）变化时，将数据传递给父组件-js教程-PHP中文网

React：在子组件表单（单选按钮）变化时，将数据传递给父组件

DDD

发布： 2025-07-19 15:46:01

原创

179人浏览过

react：在子组件表单（单选按钮）变化时，将数据传递给父组件

在React中，当子组件的表单（特别是单选按钮）发生变化时，如何将数据传递回父组件。通过onChange事件处理函数和useEffect Hook，可以实现数据的实时传递。同时，本文还提供了一些优化建议，例如使用htmlFor属性增强可访问性，以及更清晰地命名事件处理函数。

通过 onChange 事件传递数据

在React中，父子组件之间的数据传递通常使用 props 和回调函数。当子组件的表单元素发生变化时，可以通过 onChange 事件触发一个回调函数，将新的数据传递给父组件。

以下是一个示例，展示了如何将子组件中单选按钮的选择传递给父组件：

App.js (父组件)

import React from 'react';
import Form from './Form';

function App() {

  function handleSubmit(data) {
      console.log(`coming from the parent component ${data}`)
  }

  return (
    <div className="App">
      <Form handleSubmit={handleSubmit} />
    </div>
  );
}

export default App;

登录后复制

Form.js (子组件)

import React, { useState, Fragment } from 'react';

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

}

export default Form;

登录后复制

在这个例子中：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

父组件 App 定义了一个 handleSubmit 函数，用于接收来自子组件的数据。
父组件将 handleSubmit 函数作为 props 传递给子组件 Form。
子组件 Form 维护一个 answer state，用于存储单选按钮的选中值。
当单选按钮的 onChange 事件触发时，handleChange 函数会被调用。
handleChange 函数更新 answer state，并将新的值传递给父组件的 handleSubmit 函数。

使用 useEffect Hook 传递数据

除了直接在 onChange 事件处理函数中传递数据，还可以使用 useEffect Hook 监听 state 的变化，并在 state 发生变化时将数据传递给父组件。

以下是使用 useEffect Hook 的示例：

import React, { useState, useEffect } from 'react';

function Form(props) {
  const [answer, setAnswer] = useState('');

  useEffect(() => {
    props.onSubmit(answer);
  }, [answer, props.onSubmit]);

  function handleChange(event) {
    setAnswer(event.target.value);
  }

  return (
    <>
      <form>
        <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 监听 answer state 的变化。
当 answer state 发生变化时，useEffect Hook 会调用父组件的 onSubmit 函数，并将新的 answer 值传递给它。

注意: useEffect 的依赖项数组中包含了 props.onSubmit，确保每次 props.onSubmit 变化时，useEffect 都会重新执行。

优化建议

使用 htmlFor 属性增强可访问性： 为 <label> 元素添加 htmlFor 属性，并将其值设置为对应 <input> 元素的 id 属性，可以提高表单的可访问性。这有助于屏幕阅读器等辅助技术正确地识别表单元素及其标签。
更清晰地命名事件处理函数： 将处理表单提交的函数命名为 handleSubmit，可以更清晰地区分它与元素本身的 onSubmit 事件处理函数。

总结

本文介绍了在React中，当子组件的表单（特别是单选按钮）发生变化时，如何将数据传递回父组件。通过 onChange 事件处理函数和 useEffect Hook，可以实现数据的实时传递。同时，本文还提供了一些优化建议，例如使用 htmlFor 属性增强可访问性，以及更清晰地命名事件处理函数。选择哪种方法取决于具体的应用场景和需求。希望本文能够帮助你更好地理解和应用React中的父子组件数据传递。

以上就是React：在子组件表单（单选按钮）变化时，将数据传递给父组件的详细内容，更多请关注php中文网其它相关文章！