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

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

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

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

【问题讨论】:

    标签: javascript reactjs material-ui


    【解决方案1】:
    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"
    };
    

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

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

    1. 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,我在我的原始代码中尝试过,但没有奏效。谢谢你的努力,我真的很感激。
    猜你喜欢
    • 2020-10-26
    • 1970-01-01
    • 2021-10-04
    • 1970-01-01
    • 2020-05-04
    • 1970-01-01
    • 2020-11-27
    • 2020-09-18
    • 1970-01-01
    相关资源
    最近更新 更多