Reactjs：如何在加载材料表时选中所有行复选框并在单击时取消选择，反之亦然？

Question

我在我的项目中使用反应材料表，我想在加载页面时默认选中全部选中。如何实现？ 同样，当我取消选中任何复选框时，它应该被取消选中。 我尝试使用

selectionProps: rowData => ({
    checked: true
}),

但它设置为选中所有复选框并且无法取消选择。

function BasicSelection() {
  return (
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'a', surname: 'b', birthYear: c, birthCity: d },
        { name: 'e', surname: 'f', birthYear: g, birthCity: h },
      ]}        
      options={{
        selection: true
      }}
    />
  )
}

Answer 1

您需要为每行数据添加tableData: { checked: true } 。

function BasicSelection() {
  return (
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        {
            tableData: { checked: true },
            name: 'Mehmet',
            surname: 'Baran',
            birthYear: 1987,
            birthCity: 63 },
        {
           tableData: { checked: true },
           checked: true,
           name: 'Zerya Betül',
           surname: 'Baran', 
           birthYear: 2017, 
           birthCity: 34 },
      ]}      
      options={{
        selection: true
      }}
    />
  )
}

这正是您想要的方式。