为什么toggleSelection和isSelected方法会收到不同的关键参数？
为什么toggleSelection和isSelected方法会收到不同的关键参数？
提问于 2019-07-02 16:09:18
我使用的是版本6.10.0中的react-table。使用typescript。有一种简单的方法可以使用hoc/selectTable添加复选框
但是，您需要提供用于管理选择的isSelected方法toggleSelection收到了不同的键。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);
}在我看到的所有示例中，这些方法都提供了相同的键。
回答 1
Stack Overflow用户
发布于 2019-07-03 18:25:10
看一下source，它看起来像预期的那样工作，或者有一个bug。如果你没有找到任何关于这一点的其他提及，那很可能是前者。
这是创建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-的地方。
我不熟悉这个包，所以我不能告诉你它是一个bug还是一个特性，但是这些回调参数是如何传递的是有区别的。由于包的成熟度，它强烈建议我这是有意为之的行为。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56847997
复制相关文章
相似问题
腾讯云开发者
