在 React 中点击获取输入值

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

当您单击按钮时，它会将数字乘以 5，但您不会对乘以的数字（结果）执行任何操作。在你的 handleClick 函数中，你需要这样的东西：

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

Answer 2

我将结果添加到状态中，并将结果变量添加到乘法函数中，以便您可以将其存储在状态中。请往下看：

    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')
);