Question

我有一个SelectForm类组件，其中我使用了多个带有嵌套TextField组件的React Material Autocomplete组件来显示单独的选项列表。选择选项后，“自动完成”字段的值将以本地状态存储。想法是，当用户选择所需的选项并提交表单时，isSubmitted状态将设置为true，并呈现“结果”组件，以显示与所选内容匹配的结果。如果用户然后在“结果”组件中单击“编辑配置”按钮，则isSubmitted状态将设置为false，这将触发再次显示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 };

组件重新渲染React Material UI时保留“自动完成”值

1 个答案: