将Props Callback与React Native一起使用

Question

I would like to know how can I pass callback with react native please.

Currently I have 3 components :

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} />)
        }
    }

    ...
}

When I click on TouchableOpacity in component MessageButton.js (more deeply), I see in my console :

message button, message buttons

but I don't see :

message type text

And I have this error :

Cannot read property 'callBackMessageButtons' of undefined (MessageButtons.js (line 10)

I can execute this.props.callBackMessageButtons(messageType , data); in MessageButtons.js

I use the arrow function in my render, but I have always this error.

Answer 1

Do not forget about binding your callbacks. Or just use arrow function:

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

That's necessary to make this work in the callback as you would expect.