如何使用 React 将当前组件的状态作为参数发送给另一个外部方法

2020-09-15 08:00:00 · 飞浪

简介React组件之间的数据通信至关重要，因为它允许您创建更动态的Web应用程序。但由于React只有单向数据流，因此与其他组件通信或发送数据可能会变得很棘手。要更新父组件中的状态，您必须将数

简介 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 课程，继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何使用 React 将当前组件的状态作为参数发送给另一个外部方法

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

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> ); } }

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;