如何在材料表中使用自定義“editComponent”？

Question

我正在嘗試在我的項目中使用“材料表”。 我的“圖標”列包含圖標名稱。 我需要通過從外部對話框中選擇它來更改此圖標。 我在從外部對話框更新表數據時遇到問題。 當我使用“輸入”元素並更改圖標名稱時，它可以正常工作。

editComponent: props => (
  <input
    type="text"
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

我不知道，如何通過我的對話實現這個結果。 我創建了以下剪輯項目以詳細顯示我需要的內容： https : //codesandbox.io/embed/gifted-liskov-ih72m

當我通過文本更改圖標名稱並保存更改時 - 沒問題。 更改已保存。 當我通過從外部對話框中選擇圖標來更改圖標並保存更改時 - 它不起作用。

editComponent: props => (
  <SelectIconDialog
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  />
)

我不知道，如何調用“SelectIconDilog”中的道具給出的“onChange”。

export default function SelectIconDialog(props) {
    const { value, onChange } = props;
    const [open, setOpen] = React.useState(false);
    const [selectedValue, setSelectedValue] = React.useState(value);

    function handleClickOpen() {
        setOpen(true);
    }

    const handleClose = value => {
        setOpen(false);
        setSelectedValue(value);
        //onChange(value); // it doesn't work
    };

    return (
        <div>
            <Tooltip title={selectedValue}>
                <IconButton
                    onClick={handleClickOpen}
                    color="default"
                >
                    <DynamicIcon 
                        iconName={selectedValue} 
                        // onChange={onChange} // it doesn't work
                    />
                </IconButton>
            </Tooltip>
            <SimpleDialog selectedValue={selectedValue} open={open} onClose={handleClose} />
        </div>
    );
}

Answer 1

在SelectIconDialog使用onChange={e => props.onChange(e)} ，因為e是圖標名稱，您希望將其分配給您的input 。

  const [state, setState] = React.useState({
    columns: [
      {
       ...
        editComponent: props => (
          <SelectIconDialog value={props.value} onChange={props.onChange} />
        )
      },
      ...
}

此外，在SimpleDialog您會收到錯誤，因為您沒有為您的iconNames分配唯一鍵，請嘗試：

  <div>
    {iconsNames.map((iName, key) => (
      <Tooltip title={iName} key={key}>
        <IconButton onClick={() => handleItemClick(iName)}>
          <DynamicIcon iconName={iName} />
        </IconButton>
      </Tooltip>
    ))}
  </div>;

演示：

Answer 2

  title: "title",
  field: 'fieldname',
  render: rowData => <span>{findStock(rowData.fieldname)}</span>,
  editComponent: props =>
    <Select
      value={{ value: props.value, label: findStock(props.value) }}
      onChange={e => props.onChange(e.value)}
      name='fieldname'
      autoFocus
      textFieldProps={{
        label: "fieldname" ,
        InputLabelProps: {
          shrink: true,
        },
        variant: 'outlined',
      }}
      options={stocks.map((item) => ({
        value: item.id,
        label: item.name,
      }))}
     />