[英]How to transfer a state from a component to another?
I have a form which takes name, age and gender as user input.我有一个将姓名、年龄和性别作为用户输入的表单。 When the submit button is clicked I want to transfer the state of the form to
App.js
where I can add the state to the array with users.单击提交按钮时,我想将表单的 state 传输到
App.js
,在那里我可以将 state 与用户一起添加到数组中。 How can I transfer the state from Form.js
to App.js
?如何将 state 从
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>
);
};
You need to pass a function down to the form component that takes the new user as an argument:您需要将 function 传递给将新用户作为参数的表单组件:
//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>
);
};
In your onClick you call that function and pass in the new user.在您的 onClick 中,您将其称为 function 并传入新用户。 This addUser function spreads the users that you already have in the state of App into a new array and then adds the new user to it.
这个 addUser function 将您在 App 的 state 中已有的用户传播到一个新数组中,然后将新用户添加到其中。 Note that you need an array to keep track of multiple users - you just an object before.
请注意,您需要一个数组来跟踪多个用户 - 您之前只是一个 object。
Hope that makes sense!希望这是有道理的!
ReactJS is a uni-directional framework. ReactJS 是一个单向框架。
Unidirectional data flow is a technique that is mainly found in functional reactive programming.
单向数据流是一种主要在函数式反应式编程中发现的技术。 It is also known as one-way data flow, which means the data has one, and only one way to be transferred to other parts of the application.
它也被称为单向数据流,这意味着数据有一种,并且只有一种方式可以传输到应用程序的其他部分。 In essence, this means child components are not able to update the data that is coming from the parent component.
从本质上讲,这意味着子组件无法更新来自父组件的数据。 In React, data coming from a parent is called props
在 React 中,来自父级的数据称为 props
If you are trying to make the data flow, the other way, this is not the right approach and that means there is a better way available.如果您试图使数据流动,那么这不是正确的方法,这意味着有更好的方法可用。
You can achieve this by useRef
but while scaling your application, you can run into trouble due to this flaw.您可以通过
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>
);
};
Now through ref
you have a reference of the child component in the parent component.现在通过
ref
你在父组件中有一个子组件的引用。 You can put any event listener on it and it will work.您可以在其上放置任何事件侦听器,它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.