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

【问题标题】：How to get input text value on click in ReactJS如何在 ReactJS 中单击时获取输入文本值
【发布时间】：2016-11-21 10:41:06
【问题描述】：

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

【问题讨论】：

标签： reactjs

【解决方案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>

【讨论】：

为什么要为输入框的每次更改更新状态？按钮单击时读取输入框中的值不应该更容易吗？
如果我的输入与按钮位于不同的组件中怎么办？
@PrabhatDoongarwal 我完全是 React 菜鸟，但我刚刚在官方 react 文档中看到了这个建议，使用 "controlled components" 而不是 "uncontrolled components"

【解决方案2】：

有两种方法可以做到这一点。

在包含文本输入的构造函数中创建一个状态。在每次更新状态的输入框中附加一个 onChange 事件。然后 onClick 你可以提醒状态对象。
handleClick：函数（）{ 警报（this.refs.myInput.value）； },

【讨论】：

在这种情况下最好的选择是什么？