![](/img/trans.png)
[英]How do I preserve the `this` from a previous JS state and transfer it to another?
[英]How to transfer a state from a component to another?
我有一个将姓名、年龄和性别作为用户输入的表单。 单击提交按钮时,我想将表单的 state 传输到App.js
,在那里我可以将 state 与用户一起添加到数组中。 如何将 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>
);
};
您需要将 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>
);
};
在您的 onClick 中,您将其称为 function 并传入新用户。 这个 addUser function 将您在 App 的 state 中已有的用户传播到一个新数组中,然后将新用户添加到其中。 请注意,您需要一个数组来跟踪多个用户 - 您之前只是一个 object。
希望这是有道理的!
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
你在父组件中有一个子组件的引用。 您可以在其上放置任何事件侦听器,它会起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.