ReactJSのクリックで入力テキスト値を取得する方法

Question

ReactJSを学習しています。単純なonclickイベントを使用してReactJSで入力テキスト値を取得する方法を理解したいと思います。私はチュートリアルに従っていますが、テキスト入力のパラメータを取得することはできますが。しかし、どういうわけか私はその価値を得ることができません。 これはばかな質問ですが、私はこれで苦労しています。 私のコードをチェックし、何が問題なのか教えてください。ここで

var MyComponent = React.createClass({ 
    handleClick: function() { 
    if (this.refs.myInput !== null) { 
     var input = this.refs.myInput; 
      var inputValue = input.value; 
     alert("Input is", inputValue); 
    } 
    }, 
    render: function() { 
    return (
     <div> 
     <input type="text" ref="myInput" /> 
     <input 
      type="button" 
      value="Alert the text input" 
      onClick={this.handleClick} 
     /> 
     </div> 
    ); 
    } 
}); 

ReactDOM.render(
    <MyComponent />, 
    document.getElementById('container') 
); 

は同じのためにjsfiddleです：jsfiddle link

Answer 1

まずオフあなたがalertに2つ目の引数を渡さないことができないすべて、使用の連結優れた使用状態の入力から値を取得するために、しかし代わりに

alert("Input is " + inputValue); 

Example

このように

var MyComponent = React.createClass({ 
 
    getInitialState: function() { 
 
    return { input: '' }; 
 
    }, 
 

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

 
    handleClick: function() { 
 
    console.log(this.state.input); 
 
    }, 
 

 
    render: function() { 
 
    return (
 
     <div> 
 
     <input type="text" onChange={ this.handleChange } /> 
 
     <input 
 
      type="button" 
 
      value="Alert the text input" 
 
      onClick={this.handleClick} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <MyComponent />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Answer 2

これを行うに取り掛かるには二つの方法があります。

1. テキスト入力を含むコンストラクタ内の状態を作成します。毎回状態を更新する入力ボックスにonChangeイベントをアタッチします。その後、あなたは単に状態オブジェクトに警告することができますonClick。

2. handleClick：function（）{ alert（this.refs.myInput.value）; }、