setStateまたはrefを使用して更新しますか？

Question

は、私はこのようなコンポーネントを作成する場合：それを更新するsetState()を呼び出す必要が反応するので、私は、入力中に入力すると

const MyInput = ({username})=>{ 
     return (
     <div> 
      <input type="text" value={username}/> 
     </div> 
     ); 
}; 

何も起こりません。

ので、私は何をすると、それを処理するためのonChangeメソッドを追加します：

handleOnchange(e){ 
    e.preventDefault(); 
     let name=e.target.value; 
    this.setState({username:name}); 
} 

しかし、私は手動ですべてのonChangeを処理するために持つことはあまり定型だと思う、これは値を保存するための良い方法ですか？ refを使用してそれを行うことはできますか？

Fiddle Link

Answer 1

はい、あなたは、入力時に更新する値のために、SETSTATEを呼び出す必要があります。

が良い例についてはこちらをご覧ください：https://facebook.github.io/react/docs/forms.htmlここにコピー

：

getInitialState: function() { 
    return {value: 'Hello!'}; 
    }, 
    handleChange: function(event) { 
    this.setState({value: event.target.value}); 
    }, 
    render: function() { 
    return (
     <input 
     type="text" 
     value={this.state.value} 
     onChange={this.handleChange} 
     /> 
    ); 
    } 

Answer 2

JavaScriptとimplemented by lodashでは一般的である。この問題の解決策があります。デバウンシングを使用して、ユーザーが更新を試みる前にテキストの入力を待つのを待ちます。 Here is an analogy of how it works from someone more eloquent than me：

「複数のイベントを1つにまとめる」と考えることができます。あなたが 家に帰って、エレベーターに入ると、ドアが閉まっていると想像してください。そして、突然、あなたの 隣人がホールに現れ、エレベーターに飛び乗ろうとします。 礼儀正しい！彼のためにドアを開ける：あなたはエレベーター 出発をデバウンスしています。同じ状況が第三者の で再び発生する可能性があることを考慮してください。おそらく出発時間が遅れている場合があります。 分。これで操作を行うに

あなたがlodashをインポートし、機能は（）指定された遅延時間後SETSTATEう_.debounce(function(), delay)するonChangeを設定します反応します。

This demo反応でデバウンスがどのように機能するかをデモするのは素晴らしい仕事です（コンソールを開いて入力するのと同じです）。

あなたはデバウンス機能とベストプラクティスを学びたいのであればthis SO postで答えをお読みください。

Ps：調整することもできますが、デバウンシングは特定のユースケースの方が望ましいと思います。デバウンシングのアナロジーも含めたポストにはスロットル機能があります。あなたは、リンクを評価することができます例

Answer 3

に_.throttle(function, int)と_.debounce(function, int)に代わる、それを使用するには、あなたが結合する状態のキーでそれを渡すことによってemailValuelinkを一般化することができます

class Something extends React.Component { 
    state = { 
     email: '' 
    } 

    emailValueLink = (value) => { 
     return { 
      value: this.state.email, 
      requestChange: this.handleEmailChange 
     }; 
    } 

    handleEmailChange(newEmail) { 
     this.setState({email: newEmail}); 
    } 

    render() { 
     <input type="email" valueLink={this.emailValueLink()} /> 
    } 
} 

を結合2ウェイデータを実装するために反応します

Answer 4

は、すべてのコンポーネントにコードを分割についてです反応します。したがって、この定型コードを再入力しないようにするには、コンポーネントを作成してすべてのフォーム要素に再利用することができます。 他の人のように、他人のフォームやデータバインディングコンポーネントを取り出して再利用することができます。