Question

我正在尝试获取一个文本框并输入按钮以使用语义ui转到我的分页表中的特定页面，这是我到目前为止的内容。

<div style={{marginTop: 10}}>
                  <Pagination
                        activePage={currentPage}
                        ellipsisItem={{ content: <Icon name='ellipsis horizontal' />, icon: true }}
                        firstItem={{ content: <Icon name='angle double left' />, icon: true }}
                        lastItem={{ content: <Icon name='angle double right' />, icon: true }}
                        prevItem={{ content: <Icon name='angle left' />, icon: true }}
                        nextItem={{ content: <Icon name='angle right' />, icon: true }}

                        onPageChange={this.handlePaginationChange}
                        totalPages={totalPages}
                    />
                </div>

我希望语义能够提供一个文本框和一个与其他按钮相匹配的按钮

Answer 1

不知道您是否仍然需要答案。今天早些时候我也遇到了同样的问题，我在这里找到了您的帖子，但是在执行了一些步骤之后，我找到了解决方案。

所以基本上，我要做的是在一个类似这样的表格中同时包含一个输入组件和一个分页组件：

<Form onSubmit={this.onFormSubmit}>
 <Form.Field inline>
  <input
   maxLength={5}
   size={3}
   onChange={this.handleInputChange}
   value={inputPage}
   placeholder="page"
  />
    
  <Pagination
   activePage={targetPage !== null ? targetPage : activePage}
   defaultActivePage={defaultPage}
   totalPages={totalPages}
   onPageChange={this.handlePageChange}
  />
 </Form.Field>
</Form>

因此，基本上，您可以像这样对语义ui反应分页进行控制的分页。对于每个回调函数，您都可以执行以下操作：

handleInputChange = (e) => { // Set the e.target.value to a state variable }

handlePageChange = (e) => { // Handle data on page change }
onFormSubmit = e => { // Handle data on page change }

因此，基本上，您有两个可以处理页面更改的功能，一个用于单击分页本身上的特定页面，另一个用于输入特定页面时。

使用语义ui分页搜索特定页面

1 个答案: