Как правильно очистить TextInput?

Question

Я создаю интерфейс для чата, и у меня есть проблема, чтобы правильно очистить поле 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>
        );
    }    
}

Проблема в том, что при нажатии кнопки «Отправить» текст хорошо исчезает, но если я продолжаю писать сразу после нажатиякнопка, старое сообщение объединяется с новым, которое я пишу.Чтобы избежать этого, я должен нажать на кнопку «Отправить», затем нажать на текстовое поле, а затем я могу написать новое сообщение без какой-либо конкатенации

похоже, нам нужно по-новому сосредоточиться на вводе текста, ноЯ не уверен, как это сделать.Я надеюсь, что я был ясен, спасибо заранее!

Answer 1

Попробуйте this.textInput.current.clear()

Answer 2

Спасибо за ваши ответы, но мне удалось решить проблему.

На самом деле это не было проблемой с кодом, но оно было вызвано клавиатурой Samsung по умолчанию.Он сохранил старое сообщение, отправленное каждый раз.Поэтому я решил проблему с помощью клавиатуры Google.

Так что, если у кого-то возникла такая же проблема, просто поменяйте клавиатуру.

Answer 3

Очистка TextInput с использованием .clear() только очищает то, что показывает, вам также необходимо очистить базовый state, связанный с вашим TextInput.

onSendBtnPressed = () => {
    this.textInput.clear();
    this.setState({disabled: true, text: ''}); // clear the text value
}