Question

我试图了解为什么React中有引用，以及它们可以解决什么问题帮我解决。在我看来，React文档不能很好地解释为什么我需要使用引用，并且我也找不到任何好的文章。根据文档，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

引用可以帮助您检索ID，名称或更改特定元素的值

在React中ref的实际用法是什么？

1 个答案: