Question

我正在尝试在项目中使用“材料表”。我的“图标”列包含图标名称。我需要通过从外部对话框中选择它来更改此图标。我从外部对话框更新表数据时遇到问题。当我使用'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)}
  />
)

我不知道如何调用“ 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

在for row in X_train["essay"]: ss = sid.polarity_scores(row) sentiment_pos.append(ss['pos']) sentiment_neg.append(ss['neg']) sentiment_neu.append(ss['neu']) sentiment_com.append(ss['compound'])中使用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

演示：

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

o如何在材料表中使用自定义'editComponent'？

2 个答案: