クリックして入力値を取得する

Question

入力onClickの値を取得しようとしています（onChangeではなく）、私は本当に混乱しています。私のロジックと間違って何 http://codepen.io/polinaz/pen/MmezZy?editors=0010

： （関数は、ユーザー入力を取得し、5を掛けなければならない）

var Multiply = React.createClass({ 
    getInitialState: function(){ 
    return {number: '-'} 

    }, 
    multiply: function(a){ 
    return (a * 5); 
    }, 
handleChange: function(e) { 
    this.setState({ number: e.target.value }); 
    }, 
    handleClick: function(e) { 

    this.multiply(this.state.number); 
    }, 

    render: function() { 
    return (
     <div> 
     <p>multiply by 5!</p><br /> 
     <textarea onChange={this.handleChange}> 
     </textarea><br/> 
     <button onClick={this.handleClick}>Submit</button> 
     <p>result:</p> {this.state.result} 

     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <Multiply/>, 
    document.getElementById('root') 
); 

ここでは、コードへのリンクですか？良い説明を本当に感謝します！ ありがとうございます

Answer 1

私は状態に結果を追加し、あなたが状態でそれを保存することができますので、乗算関数に結果変数を追加しました：あなたのhandleClick機能では、このようなものが必要。下記をご覧ください：

var Multiply = React.createClass({ 
    getInitialState: function(){ 
    //added result to the initial state here 
    return {number: '-', 
      result: 0} 

    }, 
    multiply: function(a){ 
    //added result var here, and set the state to accept this result 
    var result = a * 5; 
    this.setState({result: result}); 
    }, 
handleChange: function(e) { 

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

    this.multiply(this.state.number); 
    }, 

    render: function() { 
    return (
     <div> 
     <p>multiply by 5!</p><br /> 
     <textarea onChange={this.handleChange}> 
     </textarea><br/> 
     <button onClick={this.handleClick}>Submit</button> 
     <p>result:</p> {this.state.result} 

     </div> 
    ); 
    } 
}); 
ReactDOM.render(
    <Multiply/>, 
    document.getElementById('root') 
); 

Answer 2

ボタンをクリックすると、数値が5倍になりますが、その倍数（結果）で何もしません。

handleClick: function(e) { 
    this.setState({result: this.multiply(this.state.number)}); 
}