我正确使用了 ref API 用法

Question

在一年不使用 React 后，现在回到 React，并注意到我们使用 Refs 的方式发生了一些变化。我已经多次阅读该部分关于我们应该如何使用回调并查看示例，但我仍然不能 100% 确定我在我的表单中正确使用了引用。

我已经阅读了文档和示例，但我的方式似乎既不适合旧方式也不适合新方式，所以有点难过。

[编辑] 为了清楚起见，我只是在处理表单上的提交并将其传递回另一个组件，但我想检查我在表单中处理 refs 的方式是否正常。抱歉，如果不清楚。

import React, { Component } from "react";
import { Card, Form, Button } from "react-bootstrap";

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handelSubmit(e) {
    e.preventDefault();
    this.props.login(this.email.value, this.password.value);
  }

  render() {
    return (
      <Card>
        <Form className="m-4" onSubmit={this.handelSubmit}>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control
              type="email"
              placeholder="Enter email"
              ref={input => {
                this.email = input;
              }}
            />
          </Form.Group>
          <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              placeholder="Password"
              ref={input => {
                this.password = input;
              }}
            />
          </Form.Group>
          <Button variant="primary" type="submit" block>
            Login
          </Button>
        </Form>
      </Card>
    );
  }
}

export default LoginForm;
````


Can someone tell me if the way I am using the refs in my form are correct with current React Standards or how I should be doing it if wrong.

Answer 1

如果您告诉我们您要做什么会有所帮助，但要回答您的问题，它应该如下所示：

// declare ref instance
emailRef = React.createRef();
passwordRef = React.createRef();

在您的表单控件上：

// email
ref={this.emailRef}
// password
ref={this.passwordRef}

// access your refs
var email = this.emailRef.current.value;
var password = this.passwordRef.current.value;