如果我只有基本表格,应该还是this.refs还是选择document.getElementById?
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> } }
在一个方面使用另一个方面有不利之处吗?
一般而言,refs优于document.getElementById,因为它与您的其余React代码更加一致。
refs
作为响应,每个组件类都可以具有多个组件实例。 正如@Isuru在注释中指出的那样:使用id很危险,因为react不能阻止您在一页上具有多个表单,然后DOM包含具有相同ID的多个输入。那是不允许的。
id
使用引用的另一个优点是,根据设计,您只能在定义它的上下文中访问引用。如果您需要访问此上下文之外的信息,这将迫使您使用道具和状态(以及可能的商店)。 这是一个优势,因为几乎没有机会破坏单向数据流,这将使代码的可管理性降低。
注意:在几乎所有情况下,都可以完全避免引用。这是Netflix 永远不 使用 参考 的设计原则,正如Netflix的高级用户界面工程师Steve McGuire所解释的那样,此视频来自reactjs conf 2016(视频中9:58m)。 在您的情况下,这意味着将电子邮件输入值置于表单状态,添加onChange处理程序,并在Submit事件中使用状态值。