React中如何将子组件表单输入值传递给父组件？问题排查

核心错误点 #

• 表单提交默认会触发页面刷新，React合成事件会被快速回收，导致后续访问event.target返回undefined
• onSubmit事件的event.target是<form>元素本身，不是输入框，从这里解构name和value自然拿不到输入值
• 状态更新时把fName写成了小写的fname，属性名大小写不匹配，导致List组件无法读取正确值

修复后的代码 #

Form组件 #

import './App.css';

function Form({ onSubmitContact }) {
  return (
    <div className="container">
      <h1>Hello</h1>
      <form onSubmit={onSubmitContact}>
        <input name="fName" placeholder="First Name" />
        <input name="lName" placeholder="Last Name" />
        <input name="email" placeholder="Email" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default Form;

App组件 #

import List from './List';
import './App.css';
import Form from './Form';
import { useState } from 'react';

function App() {
  const [contact, setContact] = useState({
    fName: "",
    lName: "",
    email: ""
  });

  function onSubmitContact(event) {
    // 阻止页面刷新，保留事件对象
    event.preventDefault();
    
    // 通过FormData获取所有输入框的值
    const formData = new FormData(event.target);
    const newContact = {
      fName: formData.get('fName'),
      lName: formData.get('lName'),
      email: formData.get('email')
    };
    
    // 正确更新状态，属性名和初始化一致
    setContact(newContact);
  }

  return (
    <div className="App">
      <Form onSubmitContact={onSubmitContact} />
      <List fName={contact.fName} lName={contact.lName} email={contact.email}/>
    </div>
  );
}

export default App;

List组件 #

import './App.css';

function List({fName,lName,email}) {
  return(
    <ul>
      <li>{fName}</li>
      <li>{lName}</li>
      <li>{email}</li>
    </ul>
  )
}

export default List;

可选优化：实时更新输入状态 #

如果不想等到提交再更新数据，而是实时同步输入框内容，可以给每个input添加onChange事件：

// Form组件修改input
<input 
  name="fName" 
  placeholder="First Name" 
  value={fName}
  onChange={onChangeHandler}
/>
<input 
  name="lName" 
  placeholder="Last Name" 
  value={lName}
  onChange={onChangeHandler}
/>
<input 
  name="email" 
  placeholder="Email" 
  value={email}
  onChange={onChangeHandler}
/>

然后在App组件里实现事件处理函数：

function onChangeHandler(event) {
  const { name, value } = event.target;
  // 展开原状态，只更新当前输入的字段
  setContact(prevState => ({ ...prevState, [name]: value }));
}

内容的提问来源于stack exchange，提问作者Peppe