Question

我有一个自定义的Reactjs组件，用于在网格底部显示带有下一个/上一个按钮的分页。现在，企业还需要在网格顶部显示相同的组件。如何根据网格底部的上一个/下一个按钮提供的输入显示上一个/下一个按钮事件？

我尝试使用JavaScript innerHTML来模仿行为。它仅适用于显示器。它不附加按钮的事件侦听器。我什至尝试了

document.querySelector.addEventListener('click', ()=>{console.log('test')})

它不起作用。有没有更好的方法来应对。

Answer 1

我将向Shmili Breuer答案中添加更多内容。

如果我正确地理解了您的意思，则您有2个导航，其中一个位于顶部，一个位于底部。连接它们的方式是通过组件的状态，如果使用功能组件来呈现分页内容，则通过父组件。因此，如果您更改状态，它将同时反映在两个导航中。同样，您在此处只能使用一个函数，只需传递一个参数，即可从前面提到的答案中复制代码。

 // first create a function
    nextFunction = (condition) => {
       if(condition){
          this.setState(prevState=>({
            page: prevState.page-1
          }))
       } else {
        this.setState(prevState=>({
            page: prevState.page+1
          }))
       }
    }

    // then use it in your button
    
    <button onClick={() => this.nextFunction(some condition)}>Next</button>

Answer 2

在反应中，您将向要处理单击的元素添加onClick属性。

类似这样的东西

// first create a function
nextFunction = () => {
   do next functionality....   
}

// then use it in your button

<button onClick={() => this.nextFunction()}>Next</button>

这样，您可以使顶部和底部分页都调用同一函数。希望这会有所帮助

Answer 3

只需将该组件放在顶部和底部

<Grid>
 <Pagination />
 {...someOtherComponents}
 <Pagination />
</Grid>

反应还可以。您要进行的优化是开销。

模拟React自定义组件

3 个答案: