如何使一个材料表列的编辑模式字段类型依赖于另一列的值，而不影响其他行？

Posted 2023-02-22

【中文标题】如何使一个材料表列的编辑模式字段类型依赖于另一列的值，而不影响其他行？

【英文标题】：How can I make the edit-mode field type of one material-table column dependent upon the value of another column, without affecting other rows?

【发布时间】：2020-03-05 16:25:12

【问题描述】：

总结

我需要在用户处于编辑模式时显示的输入字段根据该行的不同列的值而有所不同。例如。如果用户处于编辑模式并且Column X 的值是A，那么Column Y 应该是一个文本输入字段。然而，如果Column X 的值是B，那么Column Y 应该是一个下拉选择列表。重要的是，这不能影响任何其他行（即Column Y 可能是该行的文本输入字段这一事实不应影响任何其他行的输入类型）。

样机

如果不清楚我的要求，这里有一个模型，显示了我所追求的功能。

1.目标类型是“组”，因此“目标”字段是数字条目

2.目标类型是“地址”，因此“目标”字段是字符串的选择列表。请注意，其他行条目是 不受影响（即它们仍然是数字字段）

更多细节

我正在创建一个照明控制应用程序，并使用材料表作为用户指定按钮可以执行哪些操作的方式（它可以是单个操作，在这种情况下，表格将是单行，或者许多动作，在这种情况下，表格将有很多行）。他们可以控制单个设备，该设备存储在数据库中，应该可以从下拉列表中选择，也可以控制一组设备，在这种情况下，他们可以手动输入他们希望控制的组的编号。

代码

这段代码构成了模型的基础（上图）：

import React from "react";
import MaterialTable from 'material-table';

const devices = ["Device A (Stairs)", "Device B (Hallway)"];

export default class ControlSpecificationTable extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      columns: [
         title: 'Step', field: 'step' ,
         title: 'Target Type', field: 'target_type', lookup:  0: 'Address', 1: 'Group'  ,
         title: 'Target', field: 'target', initialEditValue: '0', lookup:  0: devices[0], 1: devices[1] ,
        //  title: 'Target', field: 'target', initialEditValue: '0', type:'numeric',

        
          title: 'Control Type',
          field: 'control_type',
          lookup:  0: 'Button', 1: 'Slider', 2: 'Arrows' ,
        ,
        
            title: 'Command type',
            field: 'command_type',
            lookup:  0: 'Arc level', 1: 'Minimum', 2: 'Maximum' 
        , 
        
            title: 'Command Value',
            field: 'command_value',
        ,
        
            title: 'Time Until Next Command (seconds)',
            field: 'time_until_next_command',
        
      ],
      data: [
         step: '1', target_type: 1, target: 1, control_type: 0, command_type: 0, command_value: 23, time_until_next_command: 3 ,
         step: '2', target_type: 1, target: 15, control_type: 1, command_type: 1, command_value: "N/A", time_until_next_command: 1 ,
         step: '3', target_type: 1, target: 13, control_type: 1, command_type: 1, command_value: "N/A", time_until_next_command: 1 ,

      ]
    
  

  render() 
    return (
    <>
        <MaterialTable
            title="Control Steps"
            columns=this.state.columns
            data=this.state.data
            editable=
                
                onRowAdd: newData =>
                    new Promise((resolve, reject) => 
                        resolve();
                    ),
                onRowUpdate: (newData, oldData) => 
                    new Promise((resolve, reject) => 
                        resolve();
                    )
                    ,
                onRowDelete: oldData => 
                    new Promise((resolve, reject) => 
                        resolve();
                    ),
                
            
        />
    </>
    )
  

【参考方案1】：

您必须跟踪当前选择的 target_type 并覆盖列的 editComponent 以显示下拉列表或 textField：

 editComponent: t =>
        this.currentEditingTarget === 0 ? (
          <Select
            value=t.value
            onChange=e => 
              t.onChange(e.target.value);
              console.group(e.target.value);
              this.currentEditingTarget = e.target.value;
            
          >
            <MenuItem value=0>devices[0]</MenuItem>
            <MenuItem value=1>devices[1]</MenuItem>
          </Select>
        ) : (
          <TextField
            value=t.value
            onChange=e => t.onChange(e.target.value)
            type="numeric"
          />
        ),

这是一个有效的codesandbox。