如何在 react-native-gifted-chat 中将消息从子输入传递到父聊天答案

【问题标题】：How to pass message from children Input to parent Chat in react-native-gifted-chat如何在 react-native-gifted-chat 中将消息从子输入传递到父聊天
【发布时间】：2019-06-17 05:38:06
【问题描述】：

我得到了一个基于 react-native-gifted-chat 的聊天，其中包含一个子 InputBox 组件，该组件具有输入布局和一些按钮以及发送按钮。我正在传递 2 个函数来处理 onSend 和相机，但我想知道如何将我在 InputBox 上写的文本发送给包含 GiftedChat 的父级。

GiftedChat 处理一系列消息，但是如何根据输入和 onPress 按钮创建新的文本消息？

这是我当前的代码：

在父级

constructor(props) {
        super(props)

        this.handleCameraPress = this.handleCameraPress.bind(this);
        this.onSend = this.onSend.bind(this);

        this.state = {
            chatData: {},
            messages: []
        }
    }

onSend(messages = []) {
    alert('sending message');
    this.setState(previousState => ({
        messages: GiftedChat.append(previousState.messages, messages),
    }))
}

handleCameraPress() {
    alert('camera tapped');
}

renderInputToolbar(props) {
    return ( <InputBox
            {...props}
            messages={ this.messages }
            onSend={ this.onSend }
            handleCameraPress={ this.handleCameraPress }
            containerStyle={ styles.inputToolbarStyle }
        />);
}

这是 GiftedChat 的样子：

<GiftedChat
     style={{ zIndex: 1 }}
     messages={this.state.messages}
     bottomOffset={Platform.OS === "ios" ? 335 : 0}
     maxComposerHeight={150}
     isAnimated={true}
     user={{ _id: 1 }}
     renderInputToolbar={ this.renderInputToolbar.bind(this) }
/>

关于儿童

render() {
   return (
      <View style={ styles.container }>
         <TouchableOpacity
            activeOpacity={0.6}
            style={styles.cameraButton}
            onPress={ this.props.handleCameraPress }>
            <Icon name='md-camera' style={ styles.cameraIcon } />
            </TouchableOpacity>
              <TextInput
                style={ styles.textInput }
                placeholder={i18n.t('chatInputPlaceholder')}
                returnKeyType={'send'}
                // onChangeText={ message => this.setState({ message })}
                // value={this.props.message}
                blurOnSubmit={false}
                ref={'chatInputRef'}
              />
         <Button
           onPress={ this.props.onSend }
           style={ styles.sendButton}>
           <Icon name='md-send' style={ styles.sendIcon } />
           </Button>
      </View>
   );
}

我猜我必须将this.props.message 传递给this.props.onSend？然后将其合并到父母的消息中？

【问题讨论】：

标签： react-native react-native-gifted-chat

【解决方案1】：

您必须创建一个状态变量，这将是您当前的 Message ，然后在 Gifted chat 中，您实现：

onInputTextChanged={text => {this.setState({typingMessage: text});}}

所以现在您的 "this.state.typingMessage" 将始终具有您在 InputToolbar 中写入的值

如果您有自定义渲染，您可以使用“props.text”访问这样的输入工具栏值：

renderSend(props) {
    return (
        <TouchableOpacity onPress={() => props.onSend({
            _id: 10,
            text: props.text,
            createdAt: new Date(),
            user: {
                _id: 1,
                name: 'Mike',
            },
        })}>
        </TouchableOpacity>
    );
}

【讨论】：