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

使用TextInput清除.clear()只会清除显示的内容，您还需要清除与state关联的基础TextInput。

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

Answer 2

尝试this.textInput.current.clear()

Answer 3

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

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

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

如何正确清除TextInput？

3 个答案: