使用materialUI自动完成表单的onSelect属性答案

【问题标题】：Using onSelect property of materialUI autocomplete form使用materialUI自动完成表单的onSelect属性
【发布时间】：2021-01-07 12:51:26
【问题描述】：

我正在尝试创建一个带有自动完成建议的搜索表单，用于从 API 中提取数据。我在显示数据和选择方面一切正常，但我想在用户选择其中一项建议后自动将他们带到相关页面。

<Autocomplete
                id="search-input"
                freeSolo
                disableClearable
                options={playerList}
                getOptionLabel={(option) => option.nickname}
                style={{ width: 200}}
                **onClick={console.log("you clicked")}
                onSelect={(val)=> window.location.href = "/player-statistics/"+val.nickname+"-"+val.account_id+"-"+server}**
                onInputChange={(event, newInputValue) => {
                    setInputValue(newInputValue);
                    if (newInputValue.length >= 3) {fetchPlayers(newInputValue)}
                }}
                renderInput={(params) => <TextField {...params} label="Search Players" variant="outlined" margin="normal" />}
            />

我尝试过使用 onChange 和 onSelect，但是只要您按下搜索字段或开始输入，它们都会不断地重新加载页面。

这个想法是跳过点击“搜索”按钮的需要。

【问题讨论】：

我认为您希望 onSubmit 不在自动完成组件上，而是在包装它的表单上。
就是这样，我不想在这个表单上使用按钮。

标签： reactjs material-ui

【解决方案1】：

当您选择建议的名称时，会触发onInputChange。
您需要在此处放置更改位置的逻辑。
然后用户不必单击其他任何内容。
如果您不希望在用户只输入一个字符时更改页面，
那么你需要在 onInputChange 中编写逻辑。

某事。喜欢

   // inside onInputChange
   if(isASuggestedName(newInputValue)) {
       //...change location
   }

【讨论】：

【解决方案2】：

我是通过 API 弄明白的。

onChange 调用有 3 个参数 - function(event: object, value: T | T[], reason: string) => void

我基本上是这样设置的，所以只有当原因是 select-option 并且它完美地工作时才会触发重定位。

谢谢大家

【讨论】：