如何正确清除 TextInput？答案

【问题标题】：How to clear TextInput correctly?如何正确清除 TextInput？
【发布时间】：2019-07-25 20:19:50
【问题描述】：

我正在创建一个聊天界面，但在正确清除 textInput 字段时遇到问题。

这是我目前拥有的代码

export default class Chat extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            text: '',
            disabled: true,
            messages: [
                {
                    id:'1',
                    text:  'Hello',
                    avatar: 'http://image.noelshack.com/fichiers/2016/47/1480031586-1474755093-risitas721.png',
                    author: {
                        avatar: 'http://image.noelshack.com/fichiers/2016/47/1480031586-1474755093-risitas721.png',
                        username: 'Dr Risitas'
                    }
                },
                {
                    id:'2',
                    text:'How are you ?',
                    author : {
                        avatar: 'http://image.noelshack.com/fichiers/2016/47/1480031586-1474755093-risitas721.png',
                        username:'Dr Risitas'
                    }

                }
            ],
        }
    }

    //Checking input text before sending
    onTyping(text) {
        if(text && text.length >= 2) {
            this.setState({
                disabled: false,
                text
            })
        }
        else {
            this.setState({
                disabled: true
            })
        }
    }

    //Clear input text when send btn is pressed
    onSendBtnPressed = () => {
        this.textInput.clear();
        this.setState({disabled: true});
    }

    //Render each item of Flatlist
    renderChatItem = ({item}) => {
        //return <Text> {item.text}</Text>
        return <ChatItem message={item} />
    }
    //Key for data in FlatList component
    keyExtractor = (item, index) => index;

    render() {
        //extra style for sending button
        const extraBtnStyle = this.state.disabled ? styles.disabledBtn : styles.enabledBtn;
        //Different behavior to avoid the view when the keyboard is opened
        let behavior ='';
        if (Platform.OS == 'ios'){
            behavior = 'padding';
        }
        return(
            <View style={styles.container}>
                <Header 
                centerComponent={{text: 'I Feel', style: { color: '#fff', fontSize: 20} }}
                containerStyles={{height: 56}} />
                <FlatList
                    data={this.state.messages}
                    renderItem={this.renderChatItem}
                    keyExtractor={this.keyExtractor}
                    inverted
                />
                <KeyboardAvoidingView behavior={behavior}>
                    <View style={styles.inputBar}>

                        <TextInput style={styles.textBox} 
                            style={styles.textBox}
                            multiline
                            defaultHeight={30}
                            onChangeText={(text) => this.onTyping(text)}
                            ref = {(input) => { this.textInput = input; }}
                        />

                        <TouchableHighlight 
                            style = {[styles.sendBtn, extraBtnStyle]}
                            disabled = {this.state.disabled}
                            onPress = {this.onSendBtnPressed}>

                            <Text style={{color: '#fff'}}> Send </Text>
                        </TouchableHighlight>
                    </View>
                </KeyboardAvoidingView> 
            </View>
        );
    }    
}

问题是，当按下发送按钮时，文本消失得很好，但如果我在按下按钮后继续写，旧消息与我正在写的新消息连接。为避免这种情况，我必须单击“发送”按钮，然后单击文本字段，然后我可以编写新消息而无需任何连接

看起来我们需要重新关注文本输入，但我不知道该怎么做。我希望我已经清楚了，提前谢谢你！

【问题讨论】：

标签： android ios react-native textinput

【解决方案1】：

试试this.textInput.current.clear()

【讨论】：

【解决方案2】：

感谢您的回答，但我设法解决了问题。

实际上这不是代码问题，但默认情况下是由三星键盘引起的。他保留了每次发送的旧信息。所以我用谷歌键盘解决了这个问题。

因此，如果有人遇到同样的问题，只需更换键盘即可。

【讨论】：