在 Material-UI 自动完成中获取选定的值答案

【问题标题】：Getting selected value in Material-UI Autocomplete在 Material-UI 自动完成中获取选定的值
【发布时间】：2021-02-09 13:44:14
【问题描述】：

这里是沙盒代码的链接： Problem

这是我的问题： 我无法像其他组件一样检索自动完成组件中的值。如果单击检索数据按钮，它将检索创建者、标题、描述、项目、严重性和状态的值，但成员字段为空。我认为问题出在我的自动完成组件上（第 95 行），我做得对吗？

注意：我重新编写了代码，以便可以在codesandbox上共享它，在我的原始代码中我使用的是redux（但我很确定问题不存在，而是在自动完成组件中）

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

在retrievedBugData 中使用对象而不是字符串：{name: "Minnie Mouse"}

const retrievedBugData = {
  creator: "Mickey Mouse",
  title: "A title",
  description: "A Description",
  project: "Project",
  members: [{name: "Minnie Mouse"}, {name: "Donald Duck"}],
  severity: "High",
  status: "Pending"
};

将自动完成的值设置为：value={bugData.members}

<Autocomplete
    multiple
    style={{ margin: "10px" }}
    limitTags={1}
    value={bugData.members}
    options={sampleUsers}
    getOptionLabel={(option) => option.name}
    fullWidth
    )}
/>

在 on change 事件中使用对象 https://codesandbox.io/s/brave-pare-4w60h?file=/src/App.js

【讨论】：

谢谢@Akif！我终于知道哪里出了问题。它在retrievedBugData 上，我的成员数组只是我原始代码中的一个字符串数组。

【解决方案2】：

这样做

     <Autocomplete
        multiple
        style={{ margin: "10px" }}
        limitTags={1}
        options={sampleUsers}
        getOptionLabel={(option) => option.name}
        fullWidth
        onChange={(e, newMember) =>
          setBugData({ ...bugData, members: newMember })      //return new member
        }

它可以工作codesandbox

【讨论】：

嗨@Yoel，我在我的原始代码中尝试过，但没有奏效。谢谢你的努力，我真的很感激。