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

获取输入值点击React

2 个答案: