反应本机文本输入清除不清除文本答案

【问题标题】：React Native Text Input Clear Doesn't Clear Text反应本机文本输入清除不清除文本
【发布时间】：2017-04-05 13:52:51
【问题描述】：

编辑：经过进一步检查，这似乎只发生在 Android 6.0.1 中。在使用 6.0 的多台设备上进行了尝试，这不是问题。

我有一个非常简单的 React Native 代码 sn-p，我想在其中清除 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 错误还是有什么方法可以避免这种行为而无需模糊键盘？

这里有一个小sn-p来澄清我的意思：https://snack.expo.io/H1S9b5Mpe。

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

【问题讨论】：

你试过清除状态吗？
您可以在此处找到此问题的解决方法：stackoverflow.com/questions/37798584/…
解决方法确实有效。这显然不理想，但我们仅将其应用于有问题的设备。
我在运行最新稳定版 RN (0.49) 的 Android 7.0 上，显然这仍然是一个问题。这种解决方法是唯一对我有用的方法（将自动更正设置为 false 不起作用，也没有手动将输入值的状态设置为 null 或空字符串，尽管 null 与空字符串由于某种原因确实表现不同（仍然两者都不是对））

标签： react-native react-native-android

【解决方案1】：

我刚刚解决了这个问题！这是一种剧烈的疼痛！

我为解决这个问题所做的（目前）是将 TextInput 的自动更正属性设置为 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: "" })，以便将输入的值重置为空字符串。

【讨论】：

这对我有用！在找到这个解决方案之前，我一直很头疼。非常聪明。谢谢。

【解决方案2】：

我编写此代码用于在 React Native OnSubmitEditing 中清除 TextInput，您可以查看我的零食：https://snack.expo.io/@andreh111/clear-textinput-onsubmitediting

代码如下：

state = {
    searchInput:'',
    clearInput:false
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(searchInput)=>this.setState({
                    searchInput
                })}
                value={!this.state.clearInput ? this.state.searchInput : null}
                onSubmitEditing={()=>{
                    this.setState({
                        clearInput:!this.state.clearInput,
                    })
                }}
            />
        </View>
    )
}

【讨论】：

【解决方案3】：

它可能与特定的 RN 版本有关，或者如您所见 - 与特定的操作系统版本有关。您拥有的 sn-p 确实可以正常工作，无法在 6.0.0 上重现此问题。

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

【讨论】：

不幸的是，同样的事情发生在 setState 上。这似乎是一个非常奇怪的问题，因为我们只能在某些运行 6.0.1 的设备上重现它。我们也可以在运行 7.0 的设备上重现它。

【解决方案4】：

好的，这是仅用于清除文本的代码。您可以添加自己的逻辑来保存它（可能在另一个状态变量中）

   state = {
    typedText:'',
}

render(){
    return(
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
            <TextInput 
                style={{
                    borderColor:'black',
                    borderWidth:1,
                    width:200,
                    height:50
                }}
                onChangeText={(typedText)=>this.setState({
                    typedText
                })}
                value={this.state.typedText ===" ? null : this.state.typedText}
                onSubmitEditing={()=>{
                    this.setState({
                        typedText:"",
                    })
                }}
            />
        </View>
    )
}

【讨论】：

【解决方案5】：

提交后清除的简单方法是：

<TextInput
    autoCorrect={false}
    style={styles.form}
    value = {this.state.text}
    placeholder={this.props.p_text}
    onChangeText={this.handleChangeText}
    onSubmitEditing={this.handleSubmitEdit}
</TextInput>

在 this.handleSubmitEdit 中做你想做的逻辑并添加这一行

handleSubmitEdit = () => {
    // do your  code
    this.setState({ text: ''});
}

这将删除组件中的文本

【讨论】：