在尝试将数据从子组件传递到父组件时，我收到一个错误 props.onSubmitForm is not a function in react

Posted 2023-02-23

【中文标题】在尝试将数据从子组件传递到父组件时，我收到一个错误 props.onSubmitForm is not a function in react

【英文标题】：am getting an error props.onSubmitForm is not a function while trying to pass data from child to parent component in react

【发布时间】：2021-11-04 07:39:46

【问题描述】：

我正在尝试以两种状态存储输入数据；触发 onChange 事件时的姓名和年龄。

此后，当表单的 onSubmit 事件被触发时，我尝试在一个级别上传递存储的数据。

我已经意识到，当提交表单并且现在是时候将数据向上传递一级时，我收到错误“props.onSubmitForm 不是函数”。

我注意到这是一个常见错误，但我尝试比较答案和代码无济于事。

这是带有表单的子组件。

  const UserDetails = (props) => 
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const submittedFormhandler = (event) => 
    event.preventDefault();
    let userDetails = 
      name: name,
      age: age
    ;

    props.onSubmitForm(userDetails);
  ;

  const getNameHandler = (event) => 
    return setName(event.target.value);
  ;

  const getAgeHandler = (event) => 
    return setAge(event.target.value);
  ;

  return (
    <form onSubmit=submittedFormhandler>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange=getNameHandler />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange=getAgeHandler />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
;

export default UserDetails;

这里是父组件

import UserDetails from "../UserDetails";

const DisplayDetails = () => 
  const submittedDataHandler = (inputData) => 
    return console.log(inputData);
  ;

  return <UserDetails onSubmitForm=submittedDataHandler />;
;

export default DisplayDetails;

【问题讨论】：

看不到任何问题，请创建一个沙盒

看不到任何问题。在我这边试过你的代码，它工作正常。

【参考方案1】：

您的代码运行得非常好，但我猜那是因为您使用了错误的组件

应该是DisplayDetails 而不是UserDetails

这个很好用：

const DisplayDetails = () => 
  const submittedDataHandler = (inputData) => 
    return console.log(inputData);
  ;

  return <UserDetails onSubmitForm=submittedDataHandler />;
;

const UserDetails = (props) => 
  const [name, setName] = React.useState("");
  const [age, setAge] = React.useState("");

  const submittedFormhandler = (event) => 
    event.preventDefault();
    let userDetails = 
      name: name,
      age: age
    ;

    props.onSubmitForm(userDetails);
  ;

  const getNameHandler = (event) => 
    return setName(event.target.value);
  ;

  const getAgeHandler = (event) => 
    return setAge(event.target.value);
  ;

  return (
    <form onSubmit=submittedFormhandler>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange=getNameHandler />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange=getAgeHandler />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
;

const rootElement = document.getElementById("root");
ReactDOM.render(<DisplayDetails />, rootElement);  // <-- RIGHT COMPONENT!!!

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

和你一样抛出错误：

const DisplayDetails = () => 
  const submittedDataHandler = (inputData) => 
    return console.log(inputData);
  ;

  return <UserDetails onSubmitForm=submittedDataHandler />;
;

const UserDetails = (props) => 
  const [name, setName] = React.useState("");
  const [age, setAge] = React.useState("");

  const submittedFormhandler = (event) => 
    event.preventDefault();
    let userDetails = 
      name: name,
      age: age
    ;

    props.onSubmitForm(userDetails);
  ;

  const getNameHandler = (event) => 
    return setName(event.target.value);
  ;

  const getAgeHandler = (event) => 
    return setAge(event.target.value);
  ;

  return (
    <form onSubmit=submittedFormhandler>
      <div>
        <label htmlFor="name">User name</label>
        <input type="text" name="name" id="" onChange=getNameHandler />
      </div>
      <div>
        <label htmlFor="age">Age</label>
        <input type="number" name="age" id="" onChange=getAgeHandler />
      </div>
      <button type="submit">Add User</button>
    </form>
  );
;

const rootElement = document.getElementById("root");
ReactDOM.render(<UserDetails />, rootElement);  // <-- WRONG COMPONENT HERE!!!

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

---

代码的错误版本应该是DisplayDetails: