自动完成选项在 React Material UI 中没有被删除

Question

我是 ReactJS 的初学者，目前正在使用 Material UI Autocomplete 组件。我有一个 data 对象，其键为 table name 和 columns 作为它们的值；一个名为columnData的对象数组（由data的值填充），其属性为field, ifSelected，field属性用于设置Autocomplete的选项标签（呈现为Chip） .在Autocomplete 下拉列表中选择一个选项时，对应的ifSelected 属性将设置为true。但是，当用户从data 对象中选择不同的table name 并将其对应的值分配给columnData 时，columnData 对象发生更改时会出现问题，其中即使ifSelected 也不会删除先前选择的选项标签所有选项的属性都是false。

我浏览了material-ui 文档here 并尝试使用getOptionSelected 属性修复它，但遇到了删除chips（即选项）的问题。

以下是我的代码：-

import React, { Component } from "react";
import { Chip, TextField } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default class MultiSelect extends Component {
  state = {
    table: "",
    tableData: [],
    data: {
      table1: ["col1", "col2", "col3", "col4", "col5"],
      table2: ["cola", "colb", "colc", "cold", "cole"]
    },
    columnData: []
  };

  handleTableChange = (event, value) => {
    console.log("Table change value is ", value);
    if (this.state.data[value]) {
      let columnData = this.state.data[value].map((column) => ({
        field: column,
        ifSelected: false
      }));
      console.log("Table change value is ", columnData);
      this.setState({ table: value, columnData });
    }
  };

  handleColumnChange = (columns) => {
    let data = this.state.columnData;

    if (data && columns) {
      data.forEach((column) => (column.ifSelected = false));
      console.log("Columns are ", columns);
      for (let column of columns) {
        let index = data.findIndex((item) => item.field === column.field);
        console.log("index is ", index);
        if (index !== -1) data[index].ifSelected = true;
      }
      this.setState({ columnData: data });
    }
  };

  componentDidMount() {
    let tableData = Object.keys(this.state.data);
    this.setState({ tableData });
    this.handleTableChange("table1");
  }

  render() {
    return (
      <>
        <Autocomplete
          id="table"
          options={this.state.tableData}
          getOptionLabel={(option) => option}
          renderInput={(params) => (
            <TextField {...params} variant="outlined" margin="normal" />
          )}
          value={this.state.table}
          onChange={this.handleTableChange}
        />
        <Autocomplete
          disabled={!this.state.table}
          style={{ marginTop: "1rem" }}
          multiple
          disableCloseOnSelect
          limitTags={3}
          options={this.state.columnData}
          getOptionLabel={(option) => option.field}
          renderInput={(params) => (
            <TextField
              style={{ fontWeight: "700" }}
              {...params}
              variant="outlined"
            />
          )}
          renderTags={(value, getTagProps) =>
            value.map((option, index) => (
              <Chip
                variant="outlined"
                key={option}
                label={option.field}
                {...getTagProps({ index })}
              />
            ))
          }
          onChange={(event, newValues) => this.handleColumnChange(newValues)}
        />
      </>
    );
  }
}

希望有任何提示。我已经添加了演示here

Answer 1

您可以通过传递value 属性来选择ifSelected 设置为true 的列来解决此问题。

<Autocomplete
  value={this.state.columnData.filter((column) => column.ifSelected)}
  // other props
/>

CodeSandbox