ReactJS / Material-Table: Как я могу автоматически заполнить строку, если кто-то выберет определенную опцию «поиск» / выпадающий список?

Question

Вопрос: Как я могу использовать функцию поиска таблиц материалов, чтобы попытаться предварительно заполнить строку в зависимости от того, что выбрано.

У меня есть массив, который содержит все важные значения, и если бы я использовал значение поиска, чтобы выбрать кого-то, я бы хотел, чтобы он затем «предварительно заполнил» строку, используя данные, основанные на массиве.

Соответствующий код:

  var arrayLookupValues = [
    { name: "John Adams", birthYear: "1826", birthCity: "Massachusetts" },
    { name: "Thomas Jefferson", birthYear: "1743", birthCity: "Virginia" },
    { name: "George Washington", birthYear: "", birthCity: "" }
  ];

    columns: [
      {
        title: "Name",
        field: "name",
        lookup: {
          1: "John Adams",
          2: "Thomas Jefferson",
          3: "George Washington"
        }
      },
      { title: "Birth Year", field: "birthYear" },
      {
        title: "Birth Place",
        field: "birthCity"
      }
    ],

Код Песочница:

https://codesandbox.io/s/material-demo-0q5zo?fontsize=14&hidenavigation=1&theme=dark

Пример того, что я хочу попробовать и сделайте:

Затем, когда выбран Джон Адамс, год рождения и место рождения заполняются (как пример ниже).

Если был выбран Джордж Вашингтон, так как «arrayLookupValues» не содержит для него birthYear или birthCity, я бы ожидал, что он просто оставит поля пустыми.

Я попытался onClick в onRowAdd (по сути, установив newData равным указанному c значению массива, которое я хочу). Проблема заключается в том, что после того, как вы нажмете «галочку», данные будут заполнены только после щелчка, а не до.

Я хочу, чтобы кто-то мог нажать кнопку «плюс», затем выбрать вариант из поиска и затем предварительно заполнить строку, прежде чем щелкнуть галочку, чтобы сохранить ее в массиве «data».

Answer 1

Вы можете просто переопределить editComponent поля, чтобы вернуть совпадающие данные для выбранного значения:

editComponent: ({ onChange, onRowDataChange, ...props }) => {
      const onCustomChange = value => {
        const lookup = props.columnDef.lookup;
        const matchingValue = jsonContainingValues.find(
          val => val.name === lookup[value]
        );
        const newValue = { ...matchingValue };
        newValue.name = value;
        onRowDataChange(newValue);
      };
      return <MTableEditField onChange={onCustomChange} {...props} />;
    },

Обновив данные с помощью onRowDataChange, вы можете переопределить весь объект вместо того, чтобы текущее поле. Вот вилка вашей песочницы .