小编典典

reactjs this.refs与document.getElementById

reactjs

如果我只有基本表格,应该还是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>
  }
}

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


阅读 577

收藏
2020-07-22

共1个答案

小编典典

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

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

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

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

2020-07-22