Почему toggleSelection и метод isSelected получают разные ключевые параметры? - PullRequest
Новая
       16

Почему toggleSelection и метод isSelected получают разные ключевые параметры?

0 голосов
/ 02 июля 2019

Я использую реагирующую таблицу в версии 6.10.0. с машинописью. Существует простой способ добавить флажок с помощью hoc / selectTable

Однако toggleSelection - метод isSelected, который вы должны предоставить для управления выделением, получают другой ключ. Метод toggleSelection получает дополнительный «select-» в начале.

Я не смог найти ни одного примера с такой проблемой.

Я знаю, что есть простой обходной путь для этой проблемы, но все же я не смог найти ни одного примера, какая дополнительная строка в начале. Я новичок в реакции, и мне кажется, что я делаю это неправильно. 

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);
}

Во всех примерах, которые я видел, методы предоставляются с одним и тем же ключом.

1 Ответ

1 голос
/ 03 июля 2019

Глядя на источник , кажется, что он работает как задумано, или есть ошибка. Если вы не нашли никакого другого упоминания об этом, вероятно, это первое.

Здесь создаются компоненты 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) и флажок, который сопоставляется с isSelected. Обратите внимание на идентификатор здесь.

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-.

Я не знаком с этим пакетом, поэтому не могу сказать вам, является ли это ошибкой или функцией, но есть разница в том, как передаются эти аргументы обратного вызова. Из-за зрелости пакета, он настоятельно рекомендует мне, что это предполагаемое поведение.

...