Как передать реквизиты в пользовательские компоненты React Big Calendar? - PullRequest
Новая
       19

Как передать реквизиты в пользовательские компоненты React Big Calendar?

1 голос
/ 29 марта 2019

Я использую React Big Calendar с пользовательскими компонентами событий.

В моем пользовательском компоненте мне нужно отобразить несколько кнопок, которые пользователь может нажать (с помощью всплывающего окна).Я получил всплывающее окно, работающее нормально, но я также хочу, чтобы класс, который отображал BigCalendar, получал уведомление при нажатии кнопки во всплывающем окне.Как передать событие onButtonClick моему пользовательскому компоненту в качестве реквизита?Вот упрощенная версия моего кода 

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEvent
                }}
            />
        );
    }
}

А вот мой класс CustomEvent 

class CustomEvent extends Component {
    render() {
        return (
            <div>
                <p>My event title: {this.props.title}</p>
                <MyPopover>
                    <Button onClick={this.props.onPopoverButtonClick}>
                </MyPopover>
            </div>
        )
    }
}

Я пытаюсь выяснить, как я могу передать 

onPopoverButtonClick={this.popoverButtonClickHandler}

на мой CustomEvent, чтобы родительский элемент получал уведомление при нажатии кнопки.

Есть идеи, как мне этого добиться?Спасибо

1 Ответ

2 голосов
/ 31 марта 2019

ОК, мне удалось заставить это работать после просмотра здесь на GitHub 

class Parent extends Component {

    popoverButtonClickHandler = (e) => {
        //handle button click
    }

    render() {
        return (
            <BigCalendar
                ...
                events={myEvents}
                components={{
                    event: CustomEventContainer({
                        onPopoverButtonClick: this.popoverButtonClickHandler
                    })
                }}
            />
        );
    }
}

А вот CustomEventContainer и CustomEvent 

const CustomEventContainer = ({ onPopoverButtonClick }) => props => {
    return <CustomEvent event={props} onPopoverButtonClick={onPopoverButtonClick} />;
}

const CustomEvent = React.memo((props) => {

    //...
    return (
        <div>
            <Button content='View' onClick={(e) => props.onPopoverButtonClick(e)} />
        </div>
    );
})
...