Как использовать пользовательский editComponent в таблице материалов?

Question

Я пытаюсь использовать «таблицу материалов» в своем проекте. Мой столбец 'icon' содержит название значка. Мне нужно изменить этот значок, выбрав его из внешнего диалога. У меня проблема с обновлением данных таблицы из внешнего диалога. Когда я использую элемент input и меняю имя значка, он работает правильно.

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)}
  />
)

Я не знаю, как вызвать 'onChange', заданный реквизитами внутри 'SelectIconDilog'.

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>;

Демо: