reactjs this.refs与document.getElementById

Question

如果我只有基本表格，应该还是this.refs还是选择document.getElementById？

基本上，我的意思是：

export default class ForgetPasswordComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleSendEmail = this.handleSendEmail.bind(this);
  }

  handleSendEmail(e) {
    e.preventDefault();

    // this.refs.email.value
    // document.getElementById('email').value
  }

  render() {
    <form onSubmit={this.handleSendEmail}>
      <input id="email" ref="email" type="text" />
      <input type="submit" />
    </form>
  }
}

在一个方面使用另一个方面有不利之处吗？

Answer 1

一般而言，refs优于document.getElementById，因为它与您的其余React代码更加一致。

作为响应，每个组件类都可以具有多个组件实例。
正如@Isuru在注释中指出的那样：使用id很危险，因为react不能阻止您在一页上具有多个表单，然后DOM包含具有相同ID的多个输入。那是不允许的。

使用引用的另一个优点是，根据设计，您只能在定义它的上下文中访问引用。如果您需要访问此上下文之外的信息，这将迫使您使用道具和状态（以及可能的商店）。
这是一个优势，因为几乎没有机会破坏单向数据流，这将使代码的可管理性降低。

注意：在几乎所有情况下，都可以完全避免引用。这是Netflix 永远不 使用 参考
的设计原则，正如Netflix的高级用户界面工程师Steve McGuire所解释的那样，此视频来自reactjs conf
2016（视频中9：58m）。
在您的情况下，这意味着将电子邮件输入值置于表单状态，添加onChange处理程序，并在Submit事件中使用状态值。