Question

我正在尝试创建一个带有自动完成建议的搜索表单，该表单从 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，但是当您按下搜索字段或开始输入时，它们都会不断地重新加载页面。

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

Answer 1

当您选择建议的名称时，会触发 onInputChange。
您需要在那里放置更改位置的逻辑。
这样用户就不必点击其他任何东西。
如果不希望用户只输入一个字符时页面发生变化，
那么你需要在 onInputChange 中为它编写逻辑。

某事。喜欢

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

Answer 2

通过 API 后我明白了。

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

我基本上是这样设置的，所以只有在 reason 是 select-option 并且它完美运行时才会触发重定位。

谢谢大家

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

2 个答案: