如何在单列材料表中编辑多个字段

Question

我正在为一个项目使用材料表。 我有一个场景，我需要有条件地在单个列中呈现和编辑多个字段。

这是场景

{
  title: intl.formatMessage({ ...commonMessages.rate }),
  field: 'fixed',
  render: rowData => {
    if (rowData.config === 'A') {
      if (rowData.type !== 'B') {
        return (
          <Fragment>
            <Typography variant="body1">
                Pips : {rowData.pips}
            </Typography>
            <Typography variant="body1">
                Percentage : {rowData.percentage}
              </Typography>
          </Fragment>
        );
      }
      return (
        <Typography variant="body1">
            {rowData.percentage}
        </Typography>
      );
    }
    return (
      <Typography variant="body1">{rowData.fixed}</Typography>
    );
  },
  editComponent: props => {
    if (props.rowData.type === 'A') {
      if (props.rowData.type !== 'B') {
        return (
          <Fragment>
            <Grid item xs={12} sm={12} md={12} lg={6}>
              <TextField
                id="pips"
                onChange={e => props.onChange(e.target.value)}
                value={props.rowData.pips}
              />
            </Grid>
            <Grid item xs={12} sm={12} md={12} lg={6}>
              <TextField
                id="percentage"
                onChange={e => props.onChange(e.target.value)}
                value={props.rowData.percentage}
              />
            </Grid>
          </Fragment>
        );
      }
      return (
        <TextField
            id="fixed"
            onChange={e => props.onChange(e.target.value)}
            value={props.rowData.fixed}
        />
      );
    }

此处渲染和编辑组件正确显示。 但是由于该字段是'fixed' ，因此点数和百分比的值不会改变，因为 onChange 适用于fixed ，即使列中的任何其他值发生了变化。

我怎样才能解决这个问题？ 任何帮助，将不胜感激。 谢谢

Answer 1

您可以像这样使用onRowDataChange道具：

<TextField
   id="pips"
   onChange={e =>
      props.onRowDataChange({
         ...props.rowData,
          pips: e.target.value
         })
       }
       value={props.rowData.pips}
  />

这是一个代码笔。