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

Posted 2023-02-22

【中文标题】如何将状态从一个组件转移到另一个？

【英文标题】：How to transfer a state from a component to another?

【发布时间】：2021-06-20 10:37:57

【问题描述】：

我有一个将姓名、年龄和性别作为用户输入的表单。单击提交按钮时，我想将表单的状态传输到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>
  );
;

【参考方案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 状态的用户传播到一个新数组中，然后将新用户添加到其中。请注意，您需要一个数组来跟踪多个用户 - 您之前只是一个对象。

希望这是有道理的！

【讨论】：

是的，这就是我要找的。例如，我怎样才能从表单中只为用户添加年龄？

我不太清楚你的意思。您想在您的 App 状态中存储仅包含年龄键/值对的对象吗？

我的意思是我怎么能做你做的同样的事情，但不考虑性别？

<input type="submit" onClick=() => onClick( name: form.name, age: form.age )/> 这是一种方法。您将所需的属性放入一个新对象中。

【参考方案2】：

ReactJS 是一个单向框架。

单向数据流是一种主要存在于 函数式反应式编程。它也被称为单向数据 流，这意味着数据只有一种传输方式 到应用程序的其他部分。本质上，这意味着孩子 组件无法更新来自 父组件。在 React 中，来自父级的数据称为 props

如果您试图让数据流动，那么这不是正确的方法，这意味着有更好的方法可用。

您可以通过useRef 实现此目的，但在扩展您的应用程序时，您可能会因为这个缺陷而遇到麻烦。

/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 ref = React.createRef();
  const [users, setUsers] = useState([
    name: "Anna",
    age: 24,
    gender: "female",
  ]);

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

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

现在通过ref，您可以在父组件中获得子组件的引用。您可以在其上放置任何事件侦听器，它会起作用。