Question

我正在尝试做一个简单的打字测试，该测试可以做两件事：

保留用户在文本输入中输入的单词数
清除当用户按下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

按下TextInput组件（React Native）时无法更改状态

1 个答案: