简介 React 组件之间的数据通信至关重要，因为它允许您创建更动态的 Web 应用程序。但由于 React 只有单向数据流，因此与其他组件通信或发送数据可能会变得很棘手。
要更新父组件中的状态，您必须将数据传递到回调 prop 中。您无需将数据或状态传递给回调 prop，而是可以直接将其发送到外部方法以完成特定任务。在本指南中，您将学习如何将组件的状态提交给外部方法。
React 中的状态
在 React 中，组件的状态是一个包含一些数据的对象。状态可能会在组件的生命周期内发生变化。以前，状态仅用于基于类的组件，但现在由于有了钩子，您可以使用 useState 钩子在基于函数的组件中利用状态。
将状态传递给组件
在深入研究如何将状态发送到外部方法之前，先看看如何将其传递给组件。
要将状态传递到另一个组件，您可以将其作为 prop 传递。
class ParentComponent extends Component {
state = {
// ..
}
render() {
return <ExampleComponent data={this.state}>
}
}
然后，在<ExampleComponent />内部，您可以通过this.props.data访问数据。
将状态传递给外部方法
将状态发送到外部方法与将状态传递给子组件类似。将this.state传递到外部方法的参数即可。
让我们从React Bootstrap 文档中获取一个登录表单的示例。它的状态中包含电子邮件和密码。
class LoginForm extends Component {
state = {
email: "",
password: ""
};
handleChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Form>
<h2>Login</h2>
<hr />
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
onChange={this.handleChange}
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={this.handleChange}
/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button variant="primary" type="button">
Submit
</Button>
</Form>
);
}
}
将<LoginForm />组件的状态传递给loginUser()外部方法，该方法将处理网络请求以检查电子邮件和密码是否正确。
loginUser ()方法如下所示。
const loginUser = async values => {
const res = await fetch({ url: SERVER_URL, method: "POST", body: values });
const data = await res.json();
return data;
};
现在，在表单内的<Button />组件的onClick处理程序中调用loginUser()方法。
// ...
<Button variant="primary" type="button" onClick={() => loginUser(this.state)}>
Submit
</Button>
// ...
组件文件的完整代码如下。
import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
const loginUser = async values => {
const res = await fetch({ url: SERVER_URL, method: "POST", body: values });
const data = await res.json();
return data;
};
class LoginForm extends Component {
state = {
email: "",
password: ""
};
handleChange = e => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Form>
<h2>Login</h2>
<hr />
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
onChange={this.handleChange}
/>
<Form.Text className="text-muted">
We'll never share your email with anyone else.
</Form.Text>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Password"
onChange={this.handleChange}
/>
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Check me out" />
</Form.Group>
<Button
variant="primary"
type="button"
onClick={() => loginUser(this.state)}
>
Submit
</Button>
</Form>
);
}
}
export default LoginForm;
这里有两点需要注意：
- 最好在onClick处理程序中明确传递状态键，而不是发送整个状态。当您进行未来更改时，您可能最终会将内部状态提供给该方法。
<Button
variant="primary"
type="button"
onClick={() => {
const { email, password } = this.state;
loginUser({ email, password });
}}
>
Submit
</Button>
- 您只能在基于类的组件中传递整个状态。函数式组件具有由useState钩子创建的单独状态变量。
结论
现在您了解了状态的概念以及如何将状态作为 props 传递给其他组件或作为参数传递给外部方法。要记住的关键是，始终最佳做法是显式传递单个状态值而不是整个状态对象。
了解更多
探索 Pluralsight 的这些 React 课程，继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
