reactjs - 为什么toggleSelection 和isSelected 方法接收不同的关键参数？

Question

我在6.10.0版本中使用react-table。用 typescript 。 有一种简单的方法可以使用 hoc/selectTable 添加复选框

但是，您需要提供来管理选择的toggleSelection isSelected 方法正在接收不同的 key 。 toggleSelection 方法在开头接收额外的“select-”。

我找不到任何出现此类问题的示例。

我知道这个问题有一个简单的解决方法，但我仍然找不到任何开头有额外字符串的示例。我是 react 新手，看来我做得不对。

import "bootstrap/dist/css/bootstrap.min.css";
import ReactTable, { RowInfo } from "react-table";
import "react-table/react-table.css";
import checkboxHOC, { SelectType } from "react-table/lib/hoc/selectTable";

const CheckboxTable = checkboxHOC(ReactTable);
....
render() {
...
<CheckboxTable
    data={this.getData()}
    columns={this.columnDefinitions()}
    multiSort={false}
    toggleSelection={(r,t,v) => this.toggleSelection(r,t,v)}
    isSelected={(key)=> this.isSelected(key)}
/>
}
...
toggleSelection = (key: string, shiftKeyPressed: boolean, row: any): any => {
    ...
    //implementation -over here key is always like "select-" + _id
    ...}

isSelected = (key: string): boolean => {
    // key received here is only _id
    return this.state.selection.includes(key);
}

在所有示例中，我都看到这些方法都提供了相同的 key 。

Answer 1

查看source ，看起来它正在按预期工作，或者存在错误。如果您没有找到任何其他提及这一点的内容，则可能是前者。

这是创建 SelectInputComponents 的位置:

   rowSelector(row) {
      if (!row || !row.hasOwnProperty(this.props.keyField)) return null
      const { toggleSelection, selectType, keyField } = this.props
      const checked = this.props.isSelected(row[this.props.keyField])
      const inputProps = {
        checked,
        onClick: toggleSelection,
        selectType,
        row,
        id: `select-${row[keyField]}`
      }
      return React.createElement(this.props.SelectInputComponent, inputProps)
    }

感兴趣的两个处理程序是 onClick(映射到toggleSelection)和checked(映射到isSelected)。注意这里的 id。

SelectInputComponent 看起来像这样:

const defaultSelectInputComponent = props => {
  return (
    <input
      type={props.selectType || 'checkbox'}
      aria-label={`${props.checked ? 'Un-select':'Select'} row with id:${props.id}` }
      checked={props.checked}
      id={props.id}
      onClick={e => {
        const { shiftKey } = e
        e.stopPropagation()
        props.onClick(props.id, shiftKey, props.row)
      }}
      onChange={() => {}}
    />
  )

在onClick(即toggleSelection)处理程序中，您可以看到 props.id 作为第一个参数传入。因此，这就是添加额外的 select- 的地方。

我不熟悉这个包，所以我无法告诉你这是一个错误还是一个功能，但是这些回调参数的传递方式有所不同。由于该包的成熟度，它强烈地向我表明这是预期的行为。