React JS material-table 根据其他两列的值自动生成一列的值

Question

我想通过乘以数量和标价来呈现 Value 列数据。

而且我找到了一种方法。但是当我控制台记录 data （data 是给予 material-table 数据道具的数组）在 material-table 它不显示名为 Value 的字段。这意味着即使我们可以在 material-table 中看到 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

那里得到答案的地方

React JS material-table 根据其他两列的值自动生成一列的值

React JS material-table autogenerate value of a column based on values of two other columns

javascript

reactjs

material-table