Reactjs 如何以编程方式控制行的切换？

我将MaterialTable与REACT（基于Material UI Table.Material Table.com的REACT的Datatable）一起使用，更准确地说是详细面板-Material Table.com/#/docs/features/detail panel

我需要什么？用户应打开/关闭详细面板，并在它们之间拖放项目

问题是：每次我渲染表时，所有详细的面板都会关闭

我正在寻找一种解决方案，允许我为每一行设置一个标志，以记录它是隐藏的还是打开的。因此，在渲染时。。React不会自动关闭所有行

我试着在表格和面板上设置选项和事件-没有人能够控制行切换

代码非常简单：

<MaterialTable
           title = "Group Keywords Preview"
           columns = {[
                 { title : "Group", field : "group" },
                 { title : "Weight", field : "weight" }
           ]}
           options={{
               selection: true
           }}
           data = { my data ...}
           detailPanel = {[
                    {
                        tooltip : 'Show Group',
                        render : rowData => {
                              return <my react component .. />
                        }
                    }
            ]}

/>

{
返回
}
}
]}
/>

物料表是否有任何标志/方法以编程方式切换行？ 我能用另一种方法吗

---

提前谢谢。

是的，你可以这样做。材质表通过向每个项目添加tableData对象来改变数据

看起来是这样的：

"tableData":{"id":0,"checked":true}}

如果选中该项以及其他事情（如筛选等），则该选项控制行id。 通过将checked键更改为true/false，可以通过编程方式控制项的选择

希望这有帮助。愉快的编码。

类详细信息面板带行单击扩展反应组件{
class DetailPanelWithRowClick extends React.Component {
  constructor(props) {
    super(props);
    
    this.tableRef = React.createRef();
  }
  

  render() {
    return (
    <>
      <MaterialTable
        tableRef={this.tableRef}
        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: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        ]}
        title="Detail Panel With RowClick Preview"
        detailPanel={rowData => {
          return (
            <iframe
              width="100%"
              height="315"
              src="https://www.youtube.com/embed/C0DPdy98e4c"
              frameborder="0"
              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen
            />
          )
        }}
        onRowClick={(event, rowData, togglePanel) => togglePanel()}
      />
      <button onClick={() => {
        this.tableRef.current.onToggleDetailPanel([0], rowData => <div>{rowData.name}</div>)
      }}>toggle second line</button>
      </>
    )
  }
}

建造师（道具）{
超级（道具）；
this.tableRef=React.createRef（）；
}
render（）{
返回(
{
返回(
)
}}
onRowClick={（事件、行数据、togglePanel）=>togglePanel（）}
/>
{
this.tableRef.current.onToggleDetailPanel（[0]，rowData=>{rowData.name}）
}}>切换第二行
)
}
}

---

您可以使用上面示例中使用的方法。

谢谢您的帮助。不幸的是，这在这里没有帮助。我需要在行或面板上进行一些切换操作，而不是在数据上。除此之外，还有设置“检查”、“筛选”等选项，但没有设置“行打开/关闭”的选项。详细信息面板也保存在其中，并具有toggleDetailPanel功能。也许你可以这样做？他们有一个文档页面，或者只是material-table.com（更像示例和代码？他们没有文档，因为这是内部数据处理。但是你可以劫持它。