在無狀態組件上反應onClick

Question

我一直在嘗試在反應組件上觸發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')}/> }