在无状态组件上反应onClick

Question

我一直在尝试在react组件上触发onClick。如果我使用

，则会触发该事件

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

如果我在无状态组件上使用相同的方法，则不会触发：

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

为什么这不可能？

Answer 1

因为您定义的是自定义组件。请注意，您提供给自定义组件的所有内容均视为道具。因此，您的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/>组件的render方法中处理样式道具

Answer 2

这不适用于无状态组件，因为应将onClick视为道具而不是事件侦听器。 例如，在PageButton内部，您应该实现类似这样的操作

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