基本的なフォームしかない場合、 を引き続き使用する必要がありますか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>
}
}
どちらか一方を使用することで、欠点はありますか?
ベストアンサー1
一般的に、refsは よりも優れていますdocument.getElementById。これは、React コードの残りの部分とより一致しているためです。
react では、すべてのコンポーネント クラスに複数のコンポーネント インスタンスを含めることができます。
また、@Isuru がコメントで指摘しているように、 の使用はid危険です。なぜなら、 react では 1 ページに複数のフォームが存在することを防止できず、DOM に同じ ID を持つ複数の入力が含まれることになるからです。これは許可されていません。
ref を使用するもう 1 つの利点は、設計上、ref にはそれを定義したコンテキスト内でのみアクセスできることです。これにより、このコンテキスト外の情報にアクセスする必要がある場合は、props と state (および場合によってはストア) を使用する必要があります。
これは利点です。なぜなら、一方向のデータ フローが中断される可能性が低くなるか、まったくなくなるためです。中断されると、コードの管理が難しくなります。
注意：ほとんどの場合、refsは完全に回避できます。Netflixが使用する設計原則は、審判は絶対にいないスティーブ・マグワイア（Netflixのシニアユーザーインターフェースエンジニア）が説明しているように、reactjs conf 2016のビデオ(ビデオの 9:58 分)。
この場合、フォームの状態にメール入力値を設定し、onChange ハンドラーを追加して、送信イベントで状態値を使用することになります。