Material-Table with Select (options) 字段在编辑模式下清除字段值

Question

我正在使用 Material-Table 选项字段和下拉组件，如下所示：

                  {
                    title: content[lang].Basic_Service_Code,
                    field: "Basic_Service_Code",
                    editable: "always",
                    editComponent: (props) => (
                      <div style={{width:'150px'}}>
                      <Select
                        name="basicservicecode"
                        options={servicesOption}
                        value={props.value}
                        onChange={value => props.onChange(value)}
                        placeholder=""
                        onKeyDown={e => this.handleKey(e)}
                      />
                      </div>
                    ),
                  },

这是服务选项：

    const servicesOption = servicesFiltered.map((code) => {
      return { label: code.code, value: code.code };
    });

它在插入 (addRow) 时效果很好，但是当用户编辑一行时，Select 字段的值会消失。它不显示值。它实际上清除了该值，因为它向服务器发送了“”（空值）。

如有任何帮助，我们将不胜感激。

Answer 1

我假设您的 Select 组件来自 React-Select 库。如果是这样，请尝试以下操作使其工作：

editComponent: ({ value, onChange }) => (
        <Select
          options={fruitsList}
          name="fruitSelect"
          onChange={(selectedOption) => onChange(selectedOption.value)}
          value={value ? value.value : value}
        />
      )

此行为的原因与 react-select 的工作方式有关，值实际上是具有 value 和 label 的对象特性。这是一个带有 working example 的沙盒，请尝试一下，如果对您有用，请告诉我！

完整代码：

import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";
import Select from "react-select";

const originalData = [
  {
    id: "client 1",
    name: "Anna",
    fruit: "lime"
  }];

export default function CustomEditComponent(props) {
  const fruitsList = [
    { value: "lime", label: "lime-label" },
    { value: "mango", label: "mango-label" }
  ];

  const [data, setData] = useState(originalData);

  const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },
    {
      title: "Choose a Fruit",
      field: "fruit",
      editComponent: ({ value, onChange }) => (
        <Select
          options={fruitsList}
          name="fruitSelect"
          onChange={(selectedOption) => onChange(selectedOption.value)}
          value={value ? value.value : value}
        />
      )
    }
  ];

  return (
    <Fragment>
      <MaterialTable
        columns={tableColumns}
        data={data}
        title="Material Table - Editable select component  "
        options={{ search: false, actionsColumnIndex: -1 }}
        editable={{
          onRowAdd: (newData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                setData([...data, newData]);

                resolve();
              }, 1000);
            }),
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                console.log("old:", oldData);
                console.log("new:", newData);
                const dataUpdate = [...data];
                const index = oldData.tableData.id;
                dataUpdate[index] = newData;
                setData([...dataUpdate]);

                resolve();
              }, 1000);
            }),
          onRowDelete: (oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                const dataDelete = [...data];
                const index = oldData.tableData.id;
                dataDelete.splice(index, 1);
                setData([...dataDelete]);

                resolve();
              }, 1000);
            })
        }}
      />
    </Fragment>
  );
}

Material-Table with Select (options) 字段在编辑模式下清除字段值

Material-Table with Select (options) fields clears field value on edit mode

reactjs

material-table