如何在ReactJS中单击获取输入文本值

小编典典

如何在ReactJS中单击获取输入文本值

reactjs

我正在学习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链接

阅读 327

2020-07-22

共1个答案

小编典典

首先，您无法传递alert第二个参数，而应使用串联

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>

2020-07-22