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

這正是您想要的方式。