javascript - 如何将状态从一个组件转移到另一个组件？

Question

我有一个将姓名、年龄和性别作为用户输入的表单。单击提交按钮后，我想将表单的状态传输到 App.js，我可以在其中将状态添加到包含用户的数组中。如何将状态从 Form.js 转移到 App.js？

//Form.js

export const Form = ({ onClick }) => {
  const [form, setForm] = useState({
    name: "william",
    age: 31,
    gender: "male",
  });
  return <div><input type="submit" onClick={onClick}/></div>;
};

//App.js

export const App = () => {
  const [users, setUsers] = useState({
    name: "Anna",
    age: 24,
    gender: "female",
  });

  function addUser(e) {
    e.preventDefault();
  }
  return (
    <div>
      <Form onClick={addUser} />
    </div>
  );
};

Answer 1

您需要将一个函数向下传递给将新用户作为参数的表单组件:

//Form.js
import React, { useState } from 'react';

export const Form = ({ onClick }) => {
  const [form, setForm] = useState({
    name: "william",
    age: 31,
    gender: "male",
  });
  return <div>
    <input type="submit" onClick={() => onClick(form)}/>
  </div>;
};

//App.js

export const App = () => {
  const [users, setUsers] = useState([{
    name: "Anna",
    age: 24,
    gender: "female",
  }]);

  function addUser(newUser) {
    setUsers([...users, newUser]);

  }
  return (
    <div>
      <Form onClick={(newUser) => addUser(newUser)} />
    </div>
  );
};

在您的 onClick 中调用该函数并传入新用户。此 addUser 函数将您在 App 状态下已有的用户分散到一个新数组中，然后将新用户添加到其中。请注意，您需要一个数组来跟踪多个用户 - 之前您只是一个对象。

希望这是有道理的!