Как редактировать несколько полей в таблице материалов одного столбца

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

Вот код codepen .