reactjs - useState Hook 触发选定的行消失（接下来使用 react-bootstrap-table）

Question

我正在尝试将 react-bootstrap-table-next 用于我当前的项目。在我的 App 组件中，我有 2 个子组件、一个表格和一组表单中的按钮。默认情况下，按钮组是隐藏的，只有在表格中选择了行时才会显示。我正在使用 useState 挂钩来控制按钮的可见性。

我现在遇到的问题是，当我选择表中的所有/或单行时，行选择不显示。看起来这与 useState 挂钩有关。当我从选择事件处理程序中删除 setState 代码时，我可以看到行选择...

在我的代码下面：

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import BootstrapTable from 'react-bootstrap-table-next'
import { Button, Form } from 'react-bootstrap'

const App = () => {
  const [selectedRows, setSelectedRows] = useState([])
  const [isRowSelected, setIsRowSelected] = useState(false)

  const columns = [
    { dataField: '_id', text: '_id' },
    { dataField: 'name', text: 'name' },
  ]

  const dummyData = [
    {
      _id: 1,
      name: 'firstName',
    },
    {
      _id: 2,
      name: 'secondNameName',
    },
  ]

  const handleOnSelect = (row, isSelect) => {
    setSelectedRows([...selectedRows, row])
    setIsRowSelected(() => isSelect)
    return selectedRows
  }

  const handleOnSelectAll = (isSelect, rows) => {
    setIsRowSelected(isSelect)
    setSelectedRows(rows)
  }

  const selectRow = {
    mode: 'checkbox',
    clickToSelect: true,
    onSelectAll: handleOnSelectAll,
    onSelect: handleOnSelect,
  }

  return (
    <div>
      {isRowSelected && (
        <div>
          <br />
          <Form>
            <Form.Row className='align-items-center'>
              <Button variant='outline-danger'>Delete</Button>
              <Button variant='outline-primary'>Export</Button>
            </Form.Row>
          </Form>
        </div>
      )}

      <BootstrapTable
        keyField='_id'
        data={dummyData}
        columns={columns}
        selectRow={selectRow}
      />
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

标签： reactjsreact-bootstrap-table

Answer 1

const handleOnSelect = (row, isSelect) => {
  setSelectedRows([...selectedRows, row])
  setIsRowSelected(() => isSelect)
  return selectedRows
}

此函数应true/false根据文档返回。

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/row-select-props.html#selectrowonselect-function