は、入力テキストのデフォルト値とのonblur関数は、入力されたテキストのみ

男を読んで、私はに取り組んでいます作るリアクトIは、入力されたテキストを作成し、その入力ボタンのぼかしに私は、メソッドを呼び出して、状態を更新していますJSは、入力テキストのデフォルト値とのonblur関数は、入力されたテキストのみ

を反応させます変数

が、私は代わりのonChangeのぼかしに使用する場合、入力テキストはあなたがそうでなければ、それは動作しませんのonChangeリスナーを追加する必要が

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="0.13.3" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> 
    <script data-require="[email protected]*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script> 

    <link rel="stylesheet" href="style.css" /> 
    <script type="text/jsx"> 

     var App = React.createClass({ 
      getInitialState: function() { 
       return {value: 'Hello!'}; 
      }, 

      changeTo: function (e) { 
       this.setState({value: e.target.value}); 
      }, 

      render: function() { 
       return (
        <div>{this.state.value} 
         <input type="text" defaultValue={this.state.value || ''} 
         value={this.state.value} onBlur={(e) => this.changeTo(e)} /> 
        </div> 
      ); 
      } 
     }); 

     React.render(
      <App />, 
      document.getElementById('app') 
    ); 
    </script> 
    </head> 

    <body> 
    <div id="app"></div> 
    </body> 

</html>

出典

2016-09-27 Ratan Paul

onBlurのみを使用すると、入力が制御されなくなります。変更を反映させるにはonChangeを使用する必要があります。実際に質問は何ですか？ –

私はonchangeを使用したくないのですが、私はただonblurを使用できませんか？そうであれば、変更を反映するためにonblur –

を使用する解決策は何ですか？onChange ...を使用して、他の特殊な場合（他のものを更新するなど）にonBlurを使用します。 –

専用フィールドを読みになるように見えます。

理由：value = {this.state.value}を指定すると、入力テキスト値を変数値にバインドすることを意味し、反応は入力ボックスの値を更新するコントロールを引き継ぎます。 onChangeリスナーを追加することにより、コンポーネントの状態を基本的に更新する値を更新するコンポーネント関数を呼び出すようにreactに指示し、コンポーネントがレンダリング関数を呼び出して入力テキストの値を更新するようにします。

 changeTo: function (e) { 
      this.setState({value: e.target.value}); 
     }, 

     updateValue: function (e) { 
      this.setState({value: e.target.value}); 
     }, 

     render: function() { 
      return (
       <div>{this.state.value} 
        <input type="text" defaultValue={this.state.value || ''} value={this.state.value} 
onBlur={(e) => this.changeTo(e)} onChange={(e) => this.updateValue(e}/> 
       </div> 
     ); 
     }

出典

2016-09-27 13:39:27 Arpit

は、入力テキストのデフォルト値とのonblur関数は、入力されたテキストのみ

答えて

関連する問題