Question

我是一个materialui表来呈现这样的项目列表：

    <Table selectable={true} onRowSelection={(index) => this.onRowSelection(index)} className="searchable-table">
        <TableHeader adjustForCheckbox={false} displaySelectAll={false} style={style}>
            <TableRow style={style}>
                <TableHeaderColumn>
                    <TextField
                        hintText="search"
                        onChange={(e) => this.onSearch(e)}
                        fullWidth={false} />
                </TableHeaderColumn>
            </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false} deselectOnClickaway={true}>
            {this.renderRows(this.state.data)}
        </TableBody>
    </Table>

当我点击一行时，onRowSelection会按预期触发，并且该行会被选中（突出显示）。如果我想再次触发onRowSelection，我必须两次单击所选行。一个取消选择它，另一个点击再次点击onRowSelection。

如何制作它以便不会被选中并且每次点击都会触发onRowSelected，而无需先取消选择该行？

Answer 1

如果您不希望它被选中，我认为永远不应该触发onRowSelection并且selectable应该是假的。也许你可以试试onCellClick。

   <Table selectable={false} onCellClick={(row, column, event) => this.onCellClick(row, column, event)} className="searchable-table">
        <TableHeader adjustForCheckbox={false} displaySelectAll={false} style={style}>
            <TableRow style={style}>
                <TableHeaderColumn>
                    <TextField
                        hintText="search"
                        onChange={(e) => this.onSearch(e)}
                        fullWidth={false} />
                </TableHeaderColumn>
            </TableRow>
        </TableHeader>
        <TableBody displayRowCheckbox={false} deselectOnClickaway={true}>
            {this.renderRows(this.state.data)}
        </TableBody>
    </Table>

行索引应该是处理函数的第一个参数（我将其重命名为onCellClick）。

如何以编程方式清除materialui表的行选择？

1 个答案: