javascript - 如何在按钮的onclick事件上以编程方式选择 Material 表的行-React js

Question

我正在使用 Material-Table 。我需要根据某些条件在单击按钮时选择多行。条件写在下面的代码中。谁能指导我如何根据某些条件选择多行？

 <MaterialTable
                            icons={tableIcons}title=""

                            columns={[
                                { title: 'Project Name', field: 'Project_Name', render: rowData => <Link to='/projectdetails'>{rowData.Project_Name}</Link> },
                                { title: 'Methods Covered', field: 'Methods_Covered', type: 'numeric' },
                                { title: 'Methods not Covered', field: 'Methods_not_Covered', type: 'numeric' },
                                { title: 'Total Methods', field: 'Total_Methods', type: 'numeric' },

                                    ]}

                            data={this.state.results}


                            components={{
                                Toolbar: props => (
                                    <div>
                                        <MTableToolbar {...props} />
                                        <div className="Mtable">

                                       
                                            <div>
                                                <Button color="primary" onClick={rowData => 
                                                 (rowData.Methods_Covered ? 
                                                  rowData.tableData.checked = true : 
                                                  rowData.tableData.checked = false)}>
                                                 select Highlighted</Button>
                                            </div>
                                            
                                        </div>
                                      
                                    </div>
                                ),
                            }}
                            onSelectionChange={this.handleSelect}
                            onRowClick={this.handleRowClick}
                            options={{
                                sorting: true,
                                selection: true,
                                search: true,
                                searchAutoFocus: true,
                                searchFieldAlignment: 'right',
                                searchFieldStyle: {
                                    border: 'solid black 2px',
                                },
                              }}
  />

Answer 1

<MaterialTable
    // here other params of table component      
    options={{
        selection: true,
        selectionProps: (rowData: any) => ({
            color: "primary",
            checked: agentGroups?.includes(rowData.value) ? true: false,
            onClick: (() => {
                let index = agentGroups.findIndex((group:string)=>group==rowData.value);
                index > -1 ? agentGroups.splice(index , 1) : agentGroups.push(rowData.value);
            }),
        }),
    }}
/>

关键是修改(推送或拼接)您在selectionProps的checked键中使用的onClick函数中的数组

• 如果数组中已经存在则移除，它将取消选择该行
• 如果数组中不存在则按下，它将选择该行