获取输入值点击反应

Question

我想获得输入onClick（不onChange）的价值，我真的很困惑。 （功能应该采取用户输入和乘以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') 
); 

这里是代码的链接： http://codepen.io/polinaz/pen/MmezZy?editors=0010

这有什么错我的逻辑是什么？真的很感谢一个很好的解释！ 谢谢

Answer 1

我相加的结果状态，并增加了一个结果变量到乘法功能，因此您可以将其存储在状态。请看下面：

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功能，你需要这样的：

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