如何在 ReactJS 中单击时获取输入文本值 [英] How to get input text value on click in ReactJS

问题描述

我正在学习 ReactJS，我想了解如何使用简单的 onclick 事件在 ReactJS 中获取输入文本值.我遵循了那里的教程，虽然我能够获得文本输入的参数.但不知何故，我无法获得它的价值.我知道这是一个愚蠢的问题，但我正在努力解决这个问题.请检查我的代码，让我知道它有什么问题.

var MyComponent = React.createClass({句柄点击:函数(){if (this.refs.myInput !== null) {var input = this.refs.myInput;var inputValue = input.value;alert("输入是", inputValue);}},渲染:函数(){返回 (<div><input type="text" ref="myInput"/><输入类型=按钮"value="提醒文本输入"onClick={this.handleClick}/>

);}});ReactDOM.render(<我的组件/>,document.getElementById('容器'));

这是相同的 jsfiddle:jsfiddle 链接

解决方案

首先，你不能传递给 alert 第二个参数，用串联代替

alert("输入是" + inputValue);

示例

但是为了更好地从输入中获取值，可以使用这样的状态

var MyComponent = React.createClass({getInitialState: 函数 () {返回{输入:''};},handleChange:函数(e){this.setState({ input: e.target.value });},句柄点击:函数(){控制台日志(this.state.input)；},渲染:函数(){返回 (<div><input type="text" onChange={ this.handleChange }/><输入类型=按钮"value="提醒文本输入"onClick={this.handleClick}/>

);}});ReactDOM.render(<我的组件/>,document.getElementById('容器'));

<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>

I am learning ReactJS and I want to understand how to get the input text values in ReactJS using simple onclick event. I have followed there tutorial and although i am able to get the parameter of text input. But somehow i am not able to get its value. I know this is a dumb question, but i am struggling with this. Please check my code and let me know what's wrong with it.

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

Here is jsfiddle for the same : jsfiddle link

解决方案

First of all, you can't pass to alert second argument, use concatenation instead

alert("Input is " + inputValue);

Example

However in order to get values from input better to use states like this

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>

这篇关于如何在 ReactJS 中单击时获取输入文本值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！