React 中 refs 的实际用法是什么？ [复制]

Question

我试图理解为什么 React 中有 refs，以及它们可以解决什么问题 帮我解决。在我看来，React 文档并不能很好地解释为什么我需要使用 refs，而且我也找不到任何好的文章。根据文档，refs 有一些很好的用例：

管理焦点、文本选择或媒体播放。触发 命令式动画。与第三方 DOM 库集成。

但是，我无法弄清楚它的任何实际用途。

另外，这个例子取自css-tricks：

class App extends React.Component {
  constructor(props) {
    super(props);

    this.username = React.createRef();
    this.password = React.createRef();
    this.state = {
      errors: []
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const username = this.username.current.value;
    const password = this.password.current.value;
    const errors = this.handleValidation(username, password);

    if (errors.length > 0) {
      this.setState({ errors });
      return;
    }
    // submit data
  };

  handleValidation = (username, password) => {
    const errors = [];
    if (username.length === 0) {
      errors.push("Username cannot be empty");
    }

    if (password.length < 6) {
      errors.push("Password should be at least 6 characters long");
    }

    return errors;
  };

  render() {
    const { errors } = this.state;
    return (
      <div>
        <h1>React Ref Example</h1>
        <form onSubmit={this.handleSubmit}>
          {errors.map(error => <p key={error}>{error}</p>)}
          <div>
            <label>Username:</label>
            <input type="text" ref={this.username} />
          </div>
          <div>
            <label>Password:</label>
            <input type="text" ref={this.password} />
          </div>
          <div>
            <button>Submit</button>
          </div>
        </form>
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

他们使用 refs 进行表单验证，但有什么意义呢？为此目的使用状态不是更好吗？感谢您的任何提示！

Answer 1

Refs 可以帮助您检索 id、name 或更改特定元素的值