Javascript 反应物料界面自动完成-重置下拉列表

我们正在为我们的React项目在Material UI中构建一个自动完成字段。目标是动态构建下拉列表，作为搜索功能的一部分。这一部分按预期工作。问题在于，当用户进行另一次搜索时，下拉列表保留了以前的下拉列表值。正如预期的那样，字段本身为空。我们的应用程序是作为类组件构建的

<Autocomplete
id="add-staff-user-search"
freeSolo
filterOptions={(options, state) => options}
size="small"
options={obj.state.addStaffModal.ldapUserList}
getOptionLabel={(option) => {
    const fullName = option.appUserFullName;
    if (fullName === undefined)
        return option;
    const userEmail = option.appUserEmail;
    const suffix = userEmail ? userEmail : option.upn;
    return (
        <div>
            <span>{fullName}</span>
            <span>{suffix}</span>
        </div>);
}}
onInput={(evt) => obj.handleSearchNameChange(evt)}
onChange={(evt, newValue) => {
    if (newValue && newValue.upn) {
        obj.selectUserH(newValue.upn);
    }
}}
renderInput={(params) =>
    <TextField {...params}
        variant="outlined"
        placeholder="first name last name"
        onKeyPress={(event) => {
            if (event.charCode === 13)
                event.preventDefault();
        }}
    />
} />

任何帮助都将不胜感激。

---

当输入值更改时触发的事件调用

onInputChange

而不是

onInput

，请尝试处理此事件并保持

inputValue

状态。

感谢您的输入，@SeaOfDreams。在查看了您的答案后，我意识到我需要细化这个问题-字段本身很好，这就是问题所在，它是getOptionLabel参数中的下拉列表。最终通过以下方式解决了问题：将其添加为autocomplete的参数：onInputChange={（evt）=>obj.handleOnInputNameChange（evt）}添加了此函数：`handleOnInputNameChange=（evt）=>{let value=evt.target.value；if（value==undefined）{var theModel=Object.assign（{}，this.state.addStaffModal）；theModel.ldapUserList=[]；this.setState（{addStaffModal:theModel}）；}}`谢谢！

staffNameToAdd = '';
handleSeachNameChange = (evt) => {
    this.staffNameToAdd = evt.target.value;

    if ((this.staffNameToAdd.indexOf(",") > 0 || this.staffNameToAdd.indexOf(" ") > 0) && this.staffNameToAdd.length > 5) {
        const n = this.staffNameToAdd;
        var fName = "", lName = "";
        var arrName;
        if (this.staffNameToAdd.indexOf(",") > 0) {
            arrName = n.split(",");
            fName = arrName[1].replace(/^\s+|\s+$/g, "");
            lName = arrName[0].replace(/^\s+|\s+$/g, "");
        }
        else {
            arrName = n.split(" ");
            fName = arrName[0].replace(/^\s+|\s+$/g, "");
            lName = arrName[1].replace(/^\s+|\s+$/g, "");
        }

        if (fName.length === 0 || lName.length === 0) return false;

        const r = solicitationService.getUserFromLdapByFirstLastNames(fName, lName);
        r.then((d) => {
            if (!d) return;
            var add = Object.assign({}, this.state.addStaffModal);
            add.openUserList = true;
            add.ldapUserList = d.data;
            this.setState({ addStaffModal: add })
            //console.log(this.state.addStaffModal);
        });

    } else {
        var theModel = Object.assign({}, this.state.addStaffModal);
        theModel.ldapUserList = [];
        this.setState({ addStaffModal: theModel });
    }
}