React JS材料表根据其他两列的值自动生成一列的值

Question

我想通过乘以 Quantity 和 List Price 来呈现 Value 列数据。

我找到了这样做的方法。但是当我控制台记录材料表中的 data （data 是提供给材料表数据道具的数组）时，它没有显示名为 Value 的字段。这意味着即使我们可以在材料表中看到 Value，它也不会被推送到 data 数组中。下面是控制台日志的图像。

谁能帮帮我。我希望用 Value 的值更新数据数组。

columns = {
  [{
      title: "Prod. ID",
      field: "productid",
      editComponent: props => ( <
        Autocomplete options = {
          selectedProductOptions
        }
        getOptionLabel = {
          (option) => option.productid
        }
        inputValue = {
          props.value || ''
        }
        onChange = {
          e => props.onChange(e.target.innerText)
        }
        renderInput = {
          (params) =>
          <
          MuiTextField { ...params
          }
          helperText = {
            props.helperText
          }
          error = {
            props.error
          }
          variant = "standard" /
          >
        }
        />
      ),
      validate: (rowData) => (
        rowData.productid === undefined ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        rowData.productid === '' ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        true
      ),
    },
    {
      title: "Description",
      field: "description",
      editComponent: props => ( <
        Autocomplete options = {
          selectedProductOptions
        }
        getOptionLabel = {
          (option) => option.name
        }
        onChange = {
          e => props.onChange(e.target.innerText)
        }
        inputValue = {
          props.value || ''
        }
        renderInput = {
          (params) =>
          <
          MuiTextField { ...params
          }
          helperText = {
            props.helperText
          }
          error = {
            props.error
          }
          variant = "standard" /
          >
        }
        />
      ),
      validate: (rowData) =>
        rowData.description === undefined ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        rowData.description === '' ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        true

    },
    {
      title: "Unit",
      field: "unit",
      lookup: {
        Case: 'Case',
        Pieces: 'Pieces'
      },
      width: 'min-content',
      validate: (rowData) =>
        rowData.unit === undefined ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        rowData.unit === '' ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        true

    },
    {
      title: "Quantity",
      field: "quantity",
      type: 'numeric',
      cellStyle: {
        cellWidth: 'min-content'
      },
      validate: (rowData) =>
        rowData.quantity === undefined ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        rowData.quantity === '' ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        true
    },
    {
      title: "List Price (Rs.)",
      field: "listprice",
      type: 'numeric',
      cellStyle: {
        cellWidth: 'min-content'
      },
      validate: (rowData) =>
        rowData.listprice === undefined ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        rowData.listprice === '' ?
        {
          isValid: false,
          helperText: 'Required *'
        } :
        true
    },
    {
      title: "Value (Rs.)",
      field: "value",
      type: 'numeric',
      cellStyle: {
        width: 'min-content'
      },
      editable: 'never',
      render: rowData => rowData.quantity * rowData.listprice,
    }
  ]
}

Answer 1

{
  title: "Quantity",
  field: "quantity",
  type: 'numeric',
  cellStyle: {
    cellWidth: 'min-content'
  },
  editComponent: props =>
    <
    MuiTextField
  onChange = {
    e => {
      var data = { ...props.rowData
      };
      data.quantity = e.target.value;
      let quantity = isNaN(data.quantity) ? 0 : data.quantity;
      let listprice = isNaN(data.listprice) ? 0 : data.listprice;
      data.value = quantity * listprice;
      props.onRowDataChange(data);
    }
  }
  helperText = {
    props.helperText
  }
  error = {
    props.error
  }
  variant = "standard" /
  > ,
  validate: (rowData) =>
    rowData.quantity === undefined ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    rowData.quantity === '' ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    true
}, {
  title: "List Price (Rs.)",
  field: "listprice",
  type: 'numeric',
  cellStyle: {
    cellWidth: 'min-content'
  },
  editComponent: props =>
    <
    MuiTextField
  onChange = {
    e => {
      var data = { ...props.rowData
      };
      data.listprice = e.target.value;
      let quantity = isNaN(data.quantity) ? 0 : data.quantity;
      let listprice = isNaN(data.listprice) ? 0 : data.listprice;
      data.value = quantity * listprice;
      props.onRowDataChange(data);
    }
  }
  helperText = {
    props.helperText
  }
  error = {
    props.error
  }
  variant = "standard" /
  > ,
  validate: (rowData) =>
    rowData.listprice === undefined ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    rowData.listprice === '' ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    true


}, {
  title: "Value (Rs.)",
  field: "value",
  type: 'numeric',
  cellStyle: {
    width: 'min-content'
  },
  editable: 'never',
}

我想出了答案。

我们必须使用props.onRowDataChange()。

正如您在此处看到的，我们从props 获取rowData 并将其解构并将其保存在名为data 的变量中（rowData 是一个对象数组，因为我们手动更改了listprice , quantity 我们在这里插入这段代码）然后我们做我们想做的改变。就我而言，我想通过将数量和标价相乘来获得价值。一旦更改完成。我们会将新数据传递给props.onRowDataChange()。

如果您需要更多解释，请随时询问。

这是我从https://github.com/mbrn/material-table/issues/615得到答案的地方