Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs “材质表”“切换细节”面板“从操作打开/关闭”_Reactjs_Material Table - Fatal编程技术网

Reactjs “材质表”“切换细节”面板“从操作打开/关闭”

Reactjs “材质表”“切换细节”面板“从操作打开/关闭”,reactjs,material-table,Reactjs,Material Table,有没有办法从actions列中的onClick()=>{}操作控制detailPanel在material表中的打开/关闭?最终我通过以下操作使其正常工作 导出类服务扩展React.Component{ 构造函数(){ 超级(); } this.tableRef=React.createRef(); render(){ 返回( { 返回({ onClick:(事件,行数据)=>{ this.tableRef.current.onToggleDetailPanel([rowData.tableDa

有没有办法从actions列中的onClick()=>{}操作控制detailPanel在material表中的打开/关闭?

最终我通过以下操作使其正常工作

导出类服务扩展React.Component{
构造函数(){
超级();
}
this.tableRef=React.createRef();
render(){
返回(
{
返回({
onClick:(事件,行数据)=>{
this.tableRef.current.onToggleDetailPanel([rowData.tableData.id],
this.tableRef.current.props.detailPanel[0].render)
}
})}
]}
详细面板={[
{
图标:()=>null,
openIcon:()=>null,
残疾人:对,,
渲染:rowData=>{
返回({rowData.nom_service}

) } } ]} ) } }
export class Services extends React.Component {
   constructor() {
      super();
   }
   this.tableRef = React.createRef();

   render() {
       
      return (
         <MaterialTable
          tableRef={this.tableRef}
          icons={tableIcons}
          title= 'Service catalog table'
          columns={[{ title: "Service Name", field: "nom_service", editable: 'never'}]}
          actions={[
             (rowData) => {
                return ({
                  onClick: (event, rowData) => { 
                     this.tableRef.current.onToggleDetailPanel( [rowData.tableData.id],
                     this.tableRef.current.props.detailPanel[0].render)
                  }
              })}
               
          ]}

          detailPanel={[
            {
              icon: ()=> null,
              openIcon: ()=> null,
              disabled:true,
              render: rowData => {
              
                return (<p>{rowData.nom_service}</p>)
              }
             }  
            
          ]}
      )
  }
}