在尝试将数据从子组件传递到父组件时出现错误 props.onSubmitForm is not a function

Question

我正在尝试以两种状态存储输入数据；触发 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;

Answer 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:

在尝试将数据从子组件传递到父组件时出现错误 props.onSubmitForm is not a function

am getting an error props.onSubmitForm is not a function while trying to pass data from child to parent component in react

javascript

components

state

reactjs

react-hooks

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