Сохранять значение автозаполнения при повторном рендеринге компонента React Material UI

Question

У меня есть компонент класса SelectForm, в котором я использую несколько компонентов автозаполнения React Material с вложенными компонентами TextField для отображения отдельных списков параметров. Значения полей автозаполнения сохраняются в локальном состоянии при выборе опции. Идея состоит в том, что когда пользователь выбирает требуемые параметры и отправляет форму, состояние isSubmitted устанавливается на true, и отображается компонент «Результаты», показывающий результаты, которые соответствуют выбору. Если пользователь затем нажимает кнопку «Редактировать конфигурацию» в компоненте «Результаты», состояние isSubmitted устанавливается в «ложь», что вызывает повторное отображение компонента SelectForm. На этом этапе я хочу, чтобы отображаемый текст в поле автозаполнения был тем, который хранится в состоянии (опция, которую пользователь изначально выбрал). Однако на самом деле происходит следующее: метка снова отображается в поле, а не в выбранной опции, хотя имя опции все еще сохраняется в локальном состоянии.

Я пытался использовать inputValue пропишите в поле Автозаполнение, чтобы установить соответствующее значение состояния. Это гарантирует, что правильное значение будет отображаться в поле при повторной визуализации компонента SelectForm, но поле больше недоступно для редактирования. Я хочу, чтобы пользователь мог редактировать его при необходимости на этом этапе.

Вот несколько фрагментов состояния и поля автозаполнения. Любая помощь будет принята с благодарностью.

Состояние

    constructor(props) {
        super(props);

        this.state = {
            isSubmitted: false,
            form: {
                cpuParent: '',
            }
        }
    }

handleAutoCompleteChange

handleAutocompleteChange = (name, option) => {
    let value = '';
    if (option) {
        value = [option.name]
    }
    this.setState({
        form: {
            ...this.state.form,
            [name]: value
        }
    });
};

Автозаполнение компонента

{
    cpuParentList &&
    <Autocomplete
        options={cpuParentList}
        name={"cpuParent"}
        getOptionLabel={(option) => option.name}
        onChange={
            (event, value, reason) => {
                this.handleAutocompleteChange("cpuParent", value);
            }
        }
        style={{width: '100%'}}
        renderInput={
            (params) =>
                <TextField
                    {...params}
                    name={"cpuParent"}
                    label={"Select Brand"}
                    variant="outlined"
                />
            }
        />
}

Answer 1

Я предполагаю, что ваши опции для автозаполнения являются массивом объектов, поэтому вы должны сохранить значение как объект, а не как строку.

В этих строках:

handleAutocompleteChange = (name, option) => {
    let value = '';
    if (option) {
        value = [option.name]
    }
...

Вы сохраняли значение как строковый массив.

РЕШЕНИЕ

• Вам нужно сохранить значение в object вместо строки, потому что вам нужна ссылка.
• И, наконец, вам нужно указать значение для компонента автозаполнения.

Это пример кода решения:

import React from "react";

import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
class TestAutoComplete extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isSubmitted: false,
      form: {
        cpuParent: null
      }
    };
  }

  handleAutocompleteChange = (name, option) => {
   this.setState({
      form: {
        ...this.state.form,
        [name]: option
      }
    });
  };
  render() {
    // DEFAULT CPUPARENTLIST
    const cpuParentList = [{ value: "item1", name: "Item 1" }];
    return (
      <div>
        <Autocomplete
          // PROVIDE VALUE
          value={this.state.form.cpuParent}
          options={cpuParentList}
          name={"cpuParent"}
          getOptionLabel={option => option.name}
          onChange={(event, value, reason) => {
            this.handleAutocompleteChange("cpuParent", value);
          }}
          style={{ width: "100%" }}
          renderInput={params => (
            <TextField
              {...params}
              name={"cpuParent"}
              label={"Select Brand"}
              variant="outlined"
            />
          )}
        />
      <p>Value Selected: {this.state.form.cpuParent ? this.state.form.cpuParent.name : ""}</p>
      </div>
    );
  }
}

export { TestAutoComplete };