reactjs - 在无状态组件上响应 onClick

Question

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

，事件就会触发

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

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

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

为什么这是不可能的？

Answer 1

因为你定义的是自定义组件。请注意，您提供给自定义组件的所有内容都被视为 Prop 。所以，你的 onClick方法也作为 Prop 提供。基本上你需要做 -

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

在你的<PageButton />组件 -

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

如果你知道什么 props你提供给这个组件而不提供任何不必要的 Prop ，你甚至可以传播 props对象，比如 -

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

注意 - 如果您还有其他属性要提供给此组件，请不要使用此方法，因为这会导致许多无法识别的功能警告。

PS:就算写

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

它不会工作，因为它被视为 prop .您需要在这个 <PageButton/> 的渲染方法中处理 style Prop 组件