我正确使用了 ref API 用法

Question

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

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

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

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 用法

I am using the ref API usage correctly

reactjs

react-ref