Как получить вводимое текстовое значение по клику в ReactJS

reactjs

67404 просмотра

2 ответа

196 Репутация автора

Я изучаю ReactJS, и я хочу понять, как получить входные текстовые значения в ReactJS, используя простое событие onclick. Я следовал там учебник и, хотя я могу получить параметр ввода текста. Но почему-то я не могу получить его значение. Я знаю, что это глупый вопрос, но я борюсь с этим. Пожалуйста, проверьте мой код и дайте мне знать, что с ним не так.

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

Автор: Rajat Vij Источник Размещён: 18.07.2016 06:03

Ответы (2)


5 плюса

3029 Репутация автора

Есть два способа сделать это.

  1. Создайте состояние в конструкторе, который содержит ввод текста. Присоедините событие onChange к полю ввода, которое обновляет состояние каждый раз. Затем onClick вы можете просто предупредить объект состояния.

  2. handleClick: function () {alert (this.refs.myInput.value); },

Автор: erichardson30 Размещён: 18.07.2016 06:09

50 плюса

61423 Репутация автора

Решение

Прежде всего, вы не можете перейти ко 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>

Автор: Alexander T. Размещён: 18.07.2016 06:13
Вопросы из категории :
32x32