时间戳

首页 > 解决方案 > 组件重新渲染 React Material UI 时保持 Autocomplete 值

reactjs - 组件重新渲染 React Material UI 时保持 Autocomplete 值

问题描述

我有一个 SelectForm 类组件，其中我使用多个带有嵌套 TextField 组件的 React Material Autocomplete 组件来显示单独的选项列表。选择选项时，自动完成字段的值存储在本地状态中。这个想法是，当用户选择所需的选项并提交表单时，isSubmitted状态设置为true并呈现结果组件，显示与选择匹配的结果。如果用户随后点击结果组件中的“编辑配置”按钮，则isSubmittedstate 设置为 false，这会触发 SelectForm 组件再次显示。在这个阶段，我希望自动完成字段中显示的文本是存储在状态中的文本（用户最初选择的选项）。然而，实际发生的是标签再次显示在字段中，而不是选定的选项，即使选项名称仍存储在本地状态中。

我尝试使用inputValueAutocomplete 字段上的道具将值设置为相关的状态值。这确保了当 SelectForm 组件再次呈现时，字段中显示了正确的值，但该字段不再可编辑。我希望用户能够在该阶段根据需要对其进行编辑。

以下是状态和自动完成字段的一些片段。任何帮助将不胜感激。

状态

    constructor(props) {
        super(props);

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

处理自动完成更改

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"
                />
            }
        />
}

标签： reactjsmaterial-ui

解决方案

我会假设您的自动完成选项是一个对象数组，因此您必须将值保存为对象，而不是字符串。

在这些行中：

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

您正在像字符串数组一样保存值。

解决方案

  • 您需要保存值object而不是字符串，因为您需要参考。
  • 最后，您需要为 Autocomplete 组件提供值。

这是一个解决方案代码示例：

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 };

推荐阅读