Невозможно изменить состояние при нажатии клавиши в компоненте TextInput (React Native)

Question

Я пытаюсь сделать простой тест печати, который выполняет две вещи:

1. Сохранять количество слов, вводимых пользователем при вводе текста
2. Очистить ввод текста, когда пользователь нажимает клавишу Return или пробел

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

Любая помощь будет оценена! Вот что у меня есть:

Государство

state = {
  text: "",
  words: 0
};

Обновление ввода текста

updateInput(event) {
  this.setState({
    text: event.nativeEvent.text
  });
}

Компонент TextInput

<TextInput
  value={this.state.text}
  onChange={this.updateInput.bind(this)}
  onKeyPress={({ nativeEvent }) => {
    if (nativeEvent.key === " ") {
      this.setState({
        text: "",
        words: this.state.words + 1
      });
      console.log(this.state.text);
      console.log("onKeyPress worked!");
      console.log(
        "there are a total of " + this.state.words + " words!"
      );
    }
  }}
  blurOnSubmit={false}
  autoFocus={true}
  autoCorrect={false}
  autoCompleteType={false}
  allowFontScaling={true}
  keyboardType="default"
  keyboardAppearance="dark"
  onSubmitEditing={event => {
    event.preventDefault();
    this.setState({
      text: "",
      words: this.state.words + 1
    });
  }}
/>

Answer 1

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

state = {
  text: '',
  words: 0,
  reset: false,
};

updateInput(event) {

  if (this.state.reset) {

    this.setState({
      reset: false,
    });

    return;
  }
  this.setState({
    text: event.nativeEvent.text,
  });
}

<TextInput
  value={this.state.text}
  onChange={this.updateInput.bind(this)}
  onKeyPress={({ nativeEvent }) => {
    if (nativeEvent.key === ' ') {
      this.setState({
        text: '',
        words: this.state.words + 1,
        reset: true,
      });
      console.log(this.state.text);
      console.log('onKeyPress worked!');
      console.log(
        'there are a total of ' + this.state.words + ' words!'
      );
    }
  }}
  blurOnSubmit={false}
  autoFocus={true}
  autoCorrect={false}
  autoCompleteType={false}
  allowFontScaling={true}
  keyboardType="default"
  keyboardAppearance="dark"
  onSubmitEditing={event => {
    event.preventDefault();
    this.setState({
      text: '',
      words: this.state.words + 1,
    });
  }}
/>