React本机文本输入清除不清除文本

Question

编辑:经过进一步检查,似乎这只发生在Android 6.0.1中.尝试使用6.0的几个设备,这不是一个问题.

我有一个非常简单的React Native代码片段,我想在TextInput中清除文本.它看起来有点像这样:

state = {
  v: ""
};

_changeText = v => {
  this.setState({ v });
};

clear = () => {
  this.textInputRef.clear();
}

render() {
  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={this.clear}>
        <Text> Clear </Text>
      </TouchableOpacity>
      <TextInput
        ref={ref => this.textInputRef = ref}
        value={this.state.v}
        onChangeText={this._changeText}
      />

    </View>
  );
}

现在我期望的行为是让文本输入保持焦点,并清除文本.这就是发生的事情 - 但是,当我开始在键盘上输入内容时,我之前清除的文本会重新出现在文本输入中.显然,这种文本的持久性并不是真正需要的.

有没有人遇到过这个问题？它是RN错误还是有任何方法可以避免这种行为而不需要模糊键盘？

这里有一个小片段来澄清我的意思:https://snack.expo.io/H1S9b5Mpe.

如果您开始输入,请按清除,然后继续输入,之前显示的文本将出现在新键入的文本之前.

Answer 1

我刚刚为此苦苦挣扎！这是一个严重的痛苦！

我现在为解决此问题所做的事情，是将TextInput的autocorrect prop设置为false，看来这阻止了键盘“保持状态”

<TextInput 
    autoCorrect={false} 
    ref={component => this.messageInput = component} 
    value={this.state.message} 
    onChangeText={(text) => this.setState({ message: text })}
    placeholder="Type your message here..." />

我尝试了其他所有方法，看来这是行得通的。期待更好的解决方案！

顺便说一句：您还应该这样做，this.setState({ message: "" })以便将输入上的值重置为空字符串。

Answer 2

它可能与特定的 RN 版本有关，或者正如您发现的那样 - 与特定的操作系统版本有关。您的代码片段确实工作得很好，无法在 6.0.0 上重现此问题。

也许您可以尝试另一种方法来清除文本，而 不是使用clear方法，如下所示： 。它将确保状态同步并且不会保留以前的值。TextInputthis.setState({v: ""});