私は React.js を使い始めて、簡単なフォームを作りたいのですが、ドキュメントでそれを実行する 2 つの方法を見つけました。
の最初の1つ使っています参照:
var CommentForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var author = React.findDOMNode(this.refs.author).value.trim();
var text = React.findDOMNode(this.refs.text).value.trim();
if (!text || !author) {
return;
}
// TODO: send request to the server
React.findDOMNode(this.refs.author).value = '';
React.findDOMNode(this.refs.text).value = '';
return;
},
render: function() {
return (
<form className="commentForm" onSubmit={this.handleSubmit}>
<input type="text" placeholder="Your name" ref="author" />
<input type="text" placeholder="Say something..." ref="text" />
<input type="submit" value="Post" />
</form>
);
}
});
そしてその二つ目使っています州React コンポーネント内:
var TodoTextInput = React.createClass({
getInitialState: function() {
return {
value: this.props.value || ''
};
},
render: function() /*object*/ {
return (
<input className={this.props.className}
id={this.props.id}
placeholder={this.props.placeholder}
onBlur={this._save}
value={this.state.value}
/>
);
},
_save: function() {
this.props.onSave(this.state.value);
this.setState({value: ''
});
});
2 つの選択肢の長所と短所は、もし存在するとしてもわかりません。 ありがとうございます。
ベストアンサー1
簡単に言うと、refs を避けてください。
これらは保守性に欠け、WYSIWYG モデル レンダリングが提供するシンプルさの多くが失われます。
フォームがあります。フォームをリセットするボタンを追加する必要があります。
- 参照:
- DOMを操作する
- レンダリングは3分前にフォームがどのように見えたかを説明します
- 州
- 状態の設定
- renderはフォームの見た目を説明します
入力に CCV 数値フィールドがあり、アプリケーションには数値のその他のフィールドがいくつかあります。ここで、ユーザーが数値のみを入力するように強制する必要があります。
- 参照:
- onChange ハンドラを追加します (これを回避するには ref を使用していませんか?)
- 数値でない場合は onChange で DOM を操作する
- 州
- すでにonChangeハンドラがある
- if文を追加し、無効な場合は何もしない
- レンダリングは異なる結果を生成する場合にのみ呼び出されます
ああ、気にしないでください。PM は、無効な場合は赤いボックス シャドウを表示するように求めています。
- 参照:
- onChange ハンドラーを forceUpdate などを呼び出すようにするのでしょうか?
- レンダリング出力を... に基づいて作成します。
- レンダリングで検証する値はどこで取得しますか?
- 要素の className dom プロパティを手動で操作しますか?
- 道に迷いました
- 参照なしで書き直しますか?
- マウントされている場合はレンダリングで dom から読み取り、そうでない場合は有効であると想定しますか?
- 州：
- if文を削除する
- this.state に基づいてレンダリングを検証する
制御を親に戻す必要があります。データは props にあるので、変更に対応する必要があります。
- 参照:
- componentDidMount、componentWillUpdate、componentDidUpdateを実装する
- 以前のプロパティを手動で比較する
- 最小限の変更でDOMを操作する
- やあ！React で react を実装しているんだ...
- 他にもあるけど指が痛い
- 州：
sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js
人々は、ref は状態を維持するよりも「簡単」だと考えています。これは最初の 20 分間は当てはまるかもしれませんが、私の経験ではそれ以降は当てはまりません。「もちろん、いくつかのコンポーネントを書き直すだけです」と言うのではなく、「はい、5 分で終わらせます」と言える立場に身を置いてください。