如何编辑单列中的多个字段 material-table

Question

我正在为一个项目使用 material-table。我有一个场景需要有条件地呈现和编辑单个列中的多个字段。

场景是这样

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

这里是codepen.

如何编辑单列中的多个字段 material-table

How to edit multiple fields in single column material-table

javascript

reactjs

material-table