个人中心
gpt4 book ai didi

javascript - Material -UI + React : Why doesn't 's onRowSelection work for Select All?
转载 作者：行者123 更新时间：2023-12-05 07:47:02 25 4
gpt4 key购买 nike

使用 Material-UI 的 <Table/> ( http://www.material-ui.com/#/components/table ) 使用 ReactJS，我设置了一个带有全选复选框的表。每次单独单击一行的复选框时，行 ID 都会添加到状态数组 clickedRowIds .所以console.log() , 打印出一个包含被点击行 ID 的数组。

例如，如果我只选中第一行和第二行的复选框，控制台日志将打印:____THESE ARE THE CLICKED ROWS____ [1, 2] (1 和 2 代表整数行 ID 号)。但是当我单击标题中的全选复选框时，它会选中表中的所有复选框，但在 console.log() 中。 , 它只显示 ____THESE ARE THE CLICKED ROWS____ all和 ids.forEach()出现错误 Uncaught TypeError: ids.forEach is not a function .

行复选框都通过全选复选框被点击，但为什么不是所有的行 ID 号都被添加到 clickedRowIds大批？使用 ids.forEach() ，我想使用“全选”按钮来控制台记录所有选定的行。 

export default class TestTable extends Component {
  constructor(props) {
    super(props)

    this.state = {
      clickedRowIds: [],
    }

    this.handleRowSelection = this.handleRowSelection.bind(this);
  }

  handleRowSelection(rowIds) {
    this.setState({
      clickedRowIds: rowIds
    })
  }

  render(){
    const ids = this.state.clickedRowIds
    console.log('____THESE ARE THE CLICKED ROWS____ ', ids)

    ids.forEach(id => {console.log(id)})

    return(

      <div className='table_body' style={styles.content}>
        <Table
          multiSelectable={true}
          onRowSelection={this.handleRowSelection}
        >
          <TableHeader
            displaySelectAll={true}
            enableSelectAll={true}
          >
              ...
          </TableHeader>
        </Table>
      </div>
    )
  }
}

答案将被点赞和回答。

最佳答案

在此处查看文档:http://www.material-ui.com/#/components/table

Called when a row is selected. selectedRows is an array of all row selections. IF all rows have been selected, the string "all" will be returned instead to indicate that all rows have been selected.

这意味着如果选择了所有行，令人恼火的是，您的 rowId 将不再设置为数组，而是一个表示“全部”的字符串。在对 rowIds 调用 forEach 之前，您需要一些逻辑来处理这种情况。您的错误是由于字符串“all”没有可用的 forEach 方法。

关于javascript - Material -UI + React : Why doesn't <Table/>'s onRowSelection work for Select All?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40226251/

25 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com