將Props Callback與React Native一起使用

Question

我想知道如何通過react native傳遞回調。

目前，我有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行）

我可以執行this.props.callBackMessageButtons（messageType，data）; 在MessageButtons.js中

我在渲染器中使用了箭頭功能，但始終出現此錯誤。

Answer 1

不要忘記綁定回調。 或者只是使用箭頭功能：

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

如您所料， this對於在回調中進行this工作是必要的。