如何正确清除文本输入

Question

我正在为聊天创建一个接口，我有一个问题可以正确清除文本输入的字段。

这是我目前拥有的代码

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

问题在于，按下发送按钮时，文本会消失良好，但是如果我在按下按钮后继续写入，则旧消息会与我正在编写的新消息相连。为避免这种情况，我必须单击"发送"按钮，然后单击文本字段，然后我可以编写新消息而无需任何串联

看来我们需要对文本输入进行新的重点，但是我不确定如何做。我希望我很清楚，谢谢您！

Answer 1

尝试this.textInput.current.clear()

Answer 2

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

实际上，这不是代码的问题，但默认情况下是由三星键盘引起的。他每次都保留了旧消息。因此，我通过使用Google键盘解决了问题。

因此，如果某人有相同的问题，只需更改键盘。