Question

在一年不使用它之后，现在返回到React，并注意到我们使用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;

我正确使用了ref API用法

1 个答案: