Для вызова событияChange после нажатия клавиши Enter

Я новичок в Bootstrap и застрял с этой проблемой. У меня есть поле ввода, и как только я ввожу только одну цифру, onChange функция из onChange, но я хочу, чтобы она onChange, когда я нажимаю "Enter", когда введено целое число. Та же проблема для функции проверки - она вызывается слишком рано.

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
  //bsStyle: this.validationInputFactor(),
  placeholder: this.initialFactor,
  className: "input-block-level",
  onChange: this.handleInput,
  block: true,
  addonBefore: '%',
  ref:'input',
  hasFeedback: true
});

ОТВЕТЫ

Ответ 1

Согласно React Doc, вы можете слушать события клавиатуры, такие как onKeyPress или onKeyUp, а не onChange.

var Input = React.createClass({
  render: function () {
    return <input type="text" onKeyDown={this._handleKeyDown} />;
  },
  _handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }
});

Обновление: используйте React.Component

Вот код, использующий React.Component, который делает то же самое

class Input extends React.Component {
  _handleKeyDown = (e) => {
    if (e.key === 'Enter') {
      console.log('do validate');
    }
  }

  render() {
    return <input type="text" onKeyDown={this._handleKeyDown} />
  }
}

Вот jsfiddle.

Ответ 2

Вы можете использовать onKeyPress непосредственно в поле ввода. функция onChange изменяет значение состояния при каждом изменении поля ввода и после нажатия Enter вызывается функция search().

<input
    type="text"
    placeholder="Search..."
    onChange={event => {this.setState({query: event.target.value})}}
    onKeyPress={event => {
                if (event.key === 'Enter') {
                  this.search()
                }
              }}
/>

Ответ 3

нажатие Введите, когда фокус на элементе управления (ввод) обычно вызывает событие submit (onSubmit) в самой форме (а не на входе), чтобы вы могли привязать ваш this.handleInput к форме onSubmit.

В качестве альтернативы вы можете привязать его к событию blur (onBlur) на input, которое происходит, когда фокус удаляется (например, табуляция к следующему элементу, который может получить фокус)

Ответ 4

Вы можете использовать event.key

function Input({onKeyPress}) {
  return (
    <div>
      <h2>Input</h2>
      <input type="text" onKeyPress={onKeyPress}/>
    </div>
  )
}

class Form extends React.Component {
  state = {value:""}

  handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      this.setState({value:e.target.value})
    }
  }

  render() {
    return (
      <section>
        <Input onKeyPress={this.handleKeyPress}/>
        <br/>
        <output>{this.state.value}</output>
      </section>
    );
  }
}

ReactDOM.render(
  <Form />,
  document.getElementById("react")
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Ответ 5

Реагируйте пользователи, здесь ответ на полноту.

Реагировать на версию 16.4.2

Вы либо хотите обновить для каждого нажатия клавиши, либо получить значение только при отправке. Добавление ключевых событий в компонент работает, но есть альтернативы, рекомендованные в официальных документах.

Контролируемые и неконтролируемые компоненты

Управляемая

Из Документов - Формы и Контролируемые компоненты:

В HTML элементы формы, такие как input, textarea и select, обычно поддерживают свое собственное состояние и обновляют его на основе пользовательского ввода. В React изменяемое состояние обычно сохраняется в свойстве state компонентов и обновляется только с помощью setState().

Мы можем объединить их, сделав состояние Реакта "единственным источником истины". Затем компонент React, который отображает форму, также управляет тем, что происходит в этой форме при последующем вводе пользователем. Элемент формы ввода, значение которого контролируется React таким образом, называется "контролируемым компонентом".

Если вы используете контролируемый компонент, вам придется обновлять состояние при каждом изменении значения. Чтобы это произошло, вы привязываете обработчик события к компоненту. В примерах документов, как правило, событие onChange.

Пример:

1) Связать обработчик событий в конструкторе (значение сохраняется в состоянии)

constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
}

2) Создать функцию обработчика

handleChange(event) {
    this.setState({value: event.target.value});
}

3) Создать функцию отправки формы (значение берется из состояния)

handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
}

4) Визуализация

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    </label>
    <input type="submit" value="Submit" />
</form>

Если вы используете контролируемые компоненты, ваша функция handleChange всегда будет handleChange, чтобы обновить и сохранить правильное состояние. Состояние всегда будет иметь обновленное значение, и когда форма будет отправлена, значение будет взято из состояния. Это может быть неудобно, если ваша форма очень длинная, потому что вам нужно будет создать функцию для каждого компонента или написать простую, которая обрабатывает каждое изменение значения компонента.

неконтролируемая

Из Документов - Неконтролируемый компонент

В большинстве случаев мы рекомендуем использовать контролируемые компоненты для реализации форм. В контролируемом компоненте данные формы обрабатываются компонентом React. Альтернатива - неконтролируемые компоненты, где данные формы обрабатываются самим DOM.

Чтобы написать неконтролируемый компонент, вместо написания обработчика событий для каждого обновления состояния, вы можете использовать ref для получения значений формы из DOM.

Основное отличие здесь заключается в том, что вы используете не функцию onChange, а onSubmit формы для получения значений и проверки при необходимости.

Пример:

1) Привязать обработчик событий и создать ссылку для ввода в конструкторе (значение не сохраняется в состоянии)

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
}

2) Создать функцию отправки формы (значение берется из компонента DOM)

handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
}

3) Визуализация

<form onSubmit={this.handleSubmit}>
    <label>
      Name:
      <input type="text" ref={this.input} />
    </label>
    <input type="submit" value="Submit" />
</form>

Если вы используете неконтролируемые компоненты, нет необходимости связывать функцию handleChange. Когда форма отправлена, значение будет взято из DOM, и в этот момент могут произойти необходимые проверки. Нет необходимости создавать какие-либо функции-обработчики для любого из компонентов ввода.

Ваша проблема

Теперь по вашей проблеме:

... Я хочу, чтобы он вызывался, когда я нажимаю "Enter", когда введено все число

Если вы хотите добиться этого, используйте неконтролируемый компонент. Не создавайте обработчики onChange, если в этом нет необходимости. Клавиша enter отправит форму и функция handleSubmit будет handleSubmit.

Изменения, которые вам нужно сделать:

Удалите вызов onChange в вашем элементе

var inputProcent = React.CreateElement(bootstrap.Input, {type: "text",
    //    bsStyle: this.validationInputFactor(),
    placeholder: this.initialFactor,
    className: "input-block-level",
    // onChange: this.handleInput,
    block: true,
    addonBefore: '%',
    ref:'input',
    hasFeedback: true
});

Обработайте отправленную форму и подтвердите ваш вклад. Вам нужно получить значение из вашего элемента в функции отправки формы, а затем проверить. Убедитесь, что вы создали ссылку на ваш элемент в конструкторе.

  handleSubmit(event) {
      // Get value of input field
      let value = this.input.current.value;
      event.preventDefault();
      // Validate 'value' and submit using your own api or something
  }

Пример использования неконтролируемого компонента:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    // bind submit function
    this.handleSubmit = this.handleSubmit.bind(this);
    // create reference to input field
    this.input = React.createRef();
  }

  handleSubmit(event) {
    // Get value of input field
    let value = this.input.current.value;
    console.log('value in input field: ' + value );
    event.preventDefault();
    // Validate 'value' and submit using your own api or something
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById('root')
);

Ответ 6

Вы также можете написать небольшую функцию-обертку, как это

const onEnter = (event, callback) => event.key === 'Enter' && callback()

Тогда потребляйте это на своих входах

<input 
    type="text" 
    placeholder="Title of todo" 
    onChange={e => setName(e.target.value)}
    onKeyPress={e => onEnter(e, addItem)}/>