Я пытался запустить onClick для компонента реакции. Событие запускается, если я использую

<button onClick={()=>this.goToPage('next')}>Next Page</button>

Если я использую тот же метод для компонента без состояния, он не срабатывает:

<PageButton onClick={()=>this.goToPage('next')}>Next Page</PageButton>

Почему это невозможно?

2
Filippo Rivolta 18 Сен 2018 в 13:28

2 ответа

Лучший ответ

Потому что то, что вы определяете, является настраиваемым компонентом. Обратите внимание, что все, что вы предоставляете пользовательскому компоненту, считается реквизитом. Итак, ваш метод onClick также предоставляется как реквизит. По сути, от вас потребуется сделать -

<PageButton onClick={()=>this.goToPage('next')}>Next Page</PageButton>

И в вашем компоненте <PageButton /> -

<button onClick={this.props.onClick}>Next Page</button>

Если вы знаете, что props вы предоставляете этому компоненту и не предоставляете ненужных реквизитов, вы даже можете распространить объект props, например:

<button {...this.props}>Next Page</button>

Примечание . Если у вас есть другие реквизиты для этого компонента, воздержитесь от использования этого метода, поскольку это приведет к появлению множества предупреждений о нераспознанных функциях.

PS: Даже если вы напишете

<PageButton style={{backgroundColor: 'red}}>Next Page</PageButton>

Это не сработает, потому что это рассматривается как prop. Вам нужно будет обработать опору стиля в методе рендеринга этого компонента <PageButton/>

4
Aseem Upadhyay 18 Сен 2018 в 10:39

Это не работает с компонентом без состояния, потому что onClick рассматривается как опора, а не как прослушиватель событий, которую вы должны реализовать. Например, внутри PageButton вы должны реализовать что-то вроде этого

render(){ return <div onClick={()=>this.props.onClick('next')}/> }

1
Sathish Sridhar 18 Сен 2018 в 10:37