Я правильно использую ref API - PullRequest
Новая
       8

Я правильно использую ref API

0 голосов
/ 23 апреля 2019

В настоящее время возвращаюсь в React после того, как не использовал его в течение года, и заметил, что есть некоторые изменения в том, как мы используем ссылки.Я много раз перечитывал раздел о том, как мы должны использовать обратные вызовы, и смотрел на примеры, но я все еще не уверен на 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.

1 Ответ

1 голос
/ 23 апреля 2019

Было бы полезно, если бы вы сказали нам, что вы пытаетесь сделать, но для ответа на ваш вопрос это должно выглядеть примерно так: 

// 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;
...