[解決済み] React.jsのフォームコンポーネントでstateやrefsを使う？

質問

React.jsを使い始めて、簡単なフォームを作りたいのですが、ドキュメントを見ると、2つのやり方があるようです。

その 最初のもの は 参考文献 :

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>
    );
  }
});

そして、その 2つ目 は 状態 を 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つの選択肢の長所と短所がわからないのですが、何か存在するのでしょうか？ ありがとうございます。

どのように解決するのですか？

簡単に言うと、「参照しない」です。

メンテナンス性に劣り、レンダーが提供するWYSIWYGモデルのシンプルさの多くを失います。

フォームがあります。 フォームをリセットするボタンを追加する必要があります。

• を参照してください。
  • DOM を操作する
  • 3 分前にフォームがどのように見えたかをレンダリングする
• 状態
  • setState
  • render は、フォームがどのように見えるかを記述します。

入力にCCVの数値フィールドがあり、アプリケーションの他のフィールドにも数値が入力されているとします。 ここで、ユーザーが数字のみを入力することを強制する必要があります。

• を参照してください。
  • onChangeハンドラを追加する（これを避けるためにrefsを使っているのでは？）
  • 数値でない場合、onChange で dom を操作する。
• 状態
  • すでにonChangeハンドラを持っている場合
  • if文を追加し、それが無効な場合は何もしない。
  • render は異なる結果を生成する場合にのみ呼び出されます。

えー、気にしないでください、PMは、それが無効である場合、赤いボックスシャドウを行うだけにしてほしいのです。

• を参照してください。
  • onChange ハンドラを forceUpdate か何かを呼び出すだけのものにする？
  • レンダリング出力は...え？
  • レンダリングで検証する値はどこで取得するのでしょうか？
  • 要素の className dom プロパティを手動で操作しますか？
  • 迷っています。
  • 参照なしで書き直す？
  • マウントされている場合、レンダリングでdomから読み取る そうでなければ、有効であると仮定する？
• の状態です。
  • ifステートメントを削除します。
  • this.stateに基づいてレンダリングが検証されるようにする。

親に制御を戻す必要があります。 データは現在propsにあるので、変更に反応する必要があります。

• を参照してください。
  • componentDidMount, componentWillUpdate, componentDidUpdateを実装する。
  • 以前のpropsを手動でdiffする
  • 最小限の変更で dom を操作します。
  • おい！reactでreactを実装しているぞ...。
  • もっとあるけど、指が痛い
• の状態です。
  • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

人々は、審判は状態を維持するよりも「簡単」だと考えています。 これは最初の20分間はそうかもしれませんが、それ以降は私の経験ではそうではありません。 確かに、いくつかのコンポーネントを書き換えるだけです」ではなく、「はい、5 分で完了します」と言えるような状態に自分を置いてください。