Question

我想知道如何通过响应本机传递回调。

目前我有3个组成部分：

MessageTypeText.js-> MessageButtons.js-> MessageButton.js

1个MessageButton.js

export default class MessageButton extends React.Component {

    clickButton(button) {
        console.log('message button');
        this.props.callBackFunction('PAYLOAD' , button.payload);
    }

    render() {
        let button = this.props.button;

        return (
            <TouchableOpacity onPress={() => this.clickButton(button)}>
                <Text>
                    { button.title }
                </Text>
            </TouchableOpacity>
        );
    }
}

2 MessageButtons.js

export default class MessageButtons extends React.Component {

    sendMessageToAPI(messageType, data) {
        console.log('message buttons');
        this.props.callBackMessageButtons(messageType , data);
    }

    renderButtons(buttons) {
        return(buttons.map((button, indexButton) => {
            return <MessageButton key={indexButton}
                                  button={button}
                                  callBackFunction={this.sendMessageToAPI} />
        }))
    }

    ...
}

3 MessageTypeText.js

export default class MessageTypeText extends React.Component {

    sendMessageToAPI(messageType, data) {
        console.log('message type text');
        //this.props.callBackFunction(messageType , data);
    }

    renderButtons(message) {
        if(...){
        return (<MessageButtons buttons={message.attachment.payload.buttons}
                                                callBackMessageButtons={this.sendMessageToAPI} />)
        }
    }

    ...
}

当我单击MessageButton.js组件中的TouchableOpacity（更深入）时，我在控制台中看到了：

消息按钮，消息按钮

但我看不到：

消息类型文本

我有这个错误：

无法读取未定义的属性“ callBackMessageButtons”（MessageButtons.js（第10行）

我可以在 MessageButtons.js

中执行 this.props.callBackMessageButtons（messageType，data）;

我在渲染中使用了箭头功能，但是我总是遇到这个错误。

Answer 1

不要忘记绑定回调。或仅使用箭头功能：

sendMessageToAPI = (messageType, data) => {
    console.log('message buttons');
    this.props.callBackMessageButtons(messageType , data);
}

这是使this在回调中正常工作的必要条件。

将Props Callback与React Native一起使用

1 个答案: