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

时间:2017-04-05 13:52:52

标签: react-native react-native-android

编辑:经过进一步检查,似乎这只发生在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

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

5 个答案:

答案 0 :(得分:5)

我刚刚完成了这个挣扎!它是一种剧烈的痛苦!

我做了解决这个问题(现在),将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..." />

我尝试了其他一切,看起来这是有效的。期待更好的解决方案!

BTW:您还应该this.setState({ message: "" }),以便输入上的值重置为空字符串。

答案 1 :(得分:0)

它可能与特定的RN版本相关,或者与您发现的特定操作系统版本相关。您确实可以正常使用的代码段,无法在6.0.0上重现此问题。

也许您可以尝试以不同的方式清除文本,而不是使用clear的{​​{1}}方法: TextInput。它将确保状态保持同步并且不会保持先前的值。

答案 2 :(得分:0)

我使用以下代码在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 :(得分:0)

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

   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>
    )
}

答案 4 :(得分:-1)

提交后清除方法很简单:

<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: ''});
}

这将删除组件中的文本