reactjs - 材料表查找。如何获得选定的值？

Question

我正在使用材料表来呈现我的数据，并且我正在动态构建查找

如果从第一个查找中选择了某个值，我想向我的表中添加另一个查找列

const [state, setState] = useState<TableState>({
  columns: [
    {
      title: 'Name',
      field: 'name',
      editComponent: (tableData) => {
        return <Input autoFocus={true} onChange={(e) => tableData.onChange(e.target.value)} />;
      }
    },
    {
      title: 'Type', field: 'type_id', initialEditValue: 1, editable: 'onAdd',
      lookup: columnTypes,

    }
  ],
  data: []
});

如果他们从第一次查找中选择对齐，那么我想添加另一个项目以使表格状态看起来像这样

const [state, setState] = useState<TableState>({
      columns: [
        {
          title: 'Name',
          field: 'name',
          editComponent: (tableData) => {
            return <Input autoFocus={true} onChange={(e) => tableData.onChange(e.target.value)} />;
          }
        },
        {
          title: 'Type', field: 'type_id', initialEditValue: 1, editable: 'onAdd',
          lookup: columnTypes,

        },
        {
          title: '', field: 'alignment_col', initialEditValue: 1, editable: 'onAdd',
          lookup: alignmentColumns,
        }
      ],
      data: []
    });

这就是我的材料表的样子。似乎应该有一些 onRowSelected 用于查找要运行的函数，因此如果选择了某个值，我可以更改我的状态以添加第三列。我还没有找到如何做到这一点的解决方案。

 <MaterialTable
                  title="Column Definitions"
                  columns={state.columns}
                  data={state.data}
                  onRowClick={handleClick}
                  editable={{
                    onRowAdd: (newData) =>
                      (async function () {
                        const success = await editorStore.createColumnDefinition(
                          {
                            linkId: linkId,
                            columnName: newData.name,
                            columnType: (state.columns[1].lookup as { [key: number]: string })[newData.type_id],
                            alignmentColumn: (state.columns[2].lookup as { [key: number]: string})[newData.alignment_col]
                          }
                        );
                        if (success) {
                          changeToastValues('success', `Successfully added column '${newData.name}'`);
                          handleOpen();
                        }
                      })(),
                    onRowDelete: (oldData) =>
                      (async function () {
                        const success = await editorStore.deleteColumnsDefinition(linkId, oldData.id);
                        if (success) {
                          changeToastValues('success', `Successfully deleted column '${oldData.name}'`);
                          setState((prevState) => {
                            const data = [...prevState.data];
                            data.splice(data.indexOf(oldData), 1);
                            return { ...prevState, data };
                          });
                        }
                      })(),
                    onRowUpdate: (newData, oldData) =>
                      (async function () {
                        const resData = await editorStore.editColumnDefinition(newData.id, newData.name);
                        if (resData) {
                          changeToastValues('success', `Successfully edited column '${newData.name}'`);
                          setState((prevState) => {
                            const data = [...prevState.data];
                            data[data.indexOf(oldData as Row)] = resData as Row;
                            return { ...prevState, data };
                          });
                        }
                      })()
                  }}
                />

选择对齐时，我想添加另一个查找，应该看起来像这样。

我正在努力解决如何让函数在选择查找时运行以重置状态。

标签： reactjsmaterial-table

Answer 1

我所做的是一个自定义渲染来解决这个问题。这是使用 editcomponent 创建我的下拉菜单的初始状态我还使用 useState 来更改用户从我的下拉菜单中选择的内容。

export const OptionsHeaderCell = observer(
  (props) => {

    const classes = useStyles();
    const viewerStore = useStorelinkViewerStore();
    const editorStore = useStorelinkEditorStore();
    const columnTypes = editorStore.columnTypes;
    const alignmentColumns = editorStore.alignmentColumns;
    const lookupColumnTypes = editorStore.lookupColumnTypes;
    const [columnSelected, setColumnSelected] = useState<string>('string');
    const [linkId, setLinkId] = useState<number>();
    const [state, setState] = useState<TableState>({
      columns: [
        {
          title: 'Name',
          field: 'name',
          editComponent: (tableData) => {
            return <Input autoFocus={true} onChange={(e) => tableData.onChange(e.target.value)} />;
          }
        },
        {
          title: 'Type', field: 'type_id',
          lookup: lookupColumnTypes,
          editComponent: (tableData) => {
            return <Select value={tableData.value || 'string'} onChange={(e) => {tableData.onChange(String(e.target.value)); setColumnSelected(String(e.target.value));}}>
              {columnTypes.map((type) => <MenuItem value={type.name}>{type.name}</MenuItem>)}
            </Select>;
          }
        }
      ],
      data: []
    });

然后我创建了一个使用效果来观察更改以添加对齐下拉菜单，并在用户选择除对齐之外的其他选项时将其删除。

 useEffect(() => {
      if(columnSelected === 'alignment')
      {
        setState({...state, columns: [...state.columns,
          {
            title: 'Alignment',
            field: 'alignment_col',
            lookup: alignmentColumns,
            initialEditValue: 1
          }
        ]
        });
      }
      else {
        if (state.columns.length > 2)
        {
          setState({...state, columns: [...state.columns].slice(0,2)});
        }
      }
    }, [columnSelected]);

我希望如果有人有同样的问题，这可以帮助他们。谢谢你的关注。