为使用 free solo 的 Material-UI AutoComplete 设置最大长度

Question

因此，我使用了 Material-UI 自动完成功能，并将“free solo”设置为 true，并尝试限制您可以输入的字符数。

仅供参考，使用的是 "@material-ui/core": "^4.10.0", "@material-ui/lab": "^4.0.0-alpha.54",

我尝试将 maxLength 添加到内部 TextField 上的 InputProps 作为属性，但没有任何乐趣。我决定发布我想出的答案，因为它并不明显。

Answer 1

 <Autocomplete
                freeSolo
                options={
                  optionType === "alpha"
                    ? alpha_options.map((option) => option.behavior)
                    : beta_options.map((option) => option.behavior)
                }
                onInputChange={(event, value) => {
                  setBehavior(value);
                }}
                renderInput={(params) => (
                  <TextField
                    {...params}
                    className={classes.input}
                    inputProps={{ ...params.inputProps, maxLength: process.env.REACT_APP_ENTRY_MAX_LENGTH}}
                    autoFocus={false}
                    margin="dense"
                    id="behavior"
                    label="Behavior"
                    placeholder="Complete this sentence"
                    type="text"
                    variant="outlined"
                    fullWidth
                  />
                )}
              />

以下是关键真相：

1) InputProps 和 inputProps 不是一回事。来自 TextField 上的 MUI 文档....

• inputProps：应用于输入元素的属性。
• InputProps：应用于 Input 元素的道具。它将是 FilledInput、OutlinedInput 或 Input 组件，具体取决于变体属性值。

是的，我知道这是非常愚蠢和令人沮丧的。

2) 在 AutoComplete 中，TextField 是 AutoComplete 本身的子组件。为了保留这种甜蜜的、甜蜜的 AutoComplete 功能优点，您必须将AutoComplete的 inputProps传递给 TextField。

因此这一行：

inputProps={{ ...params.inputProps, maxLength: process.env.REACT_APP_ENTRY_MAX_LENGTH}}

也就是说，使用扩展运算符，获取 params 中的所有 inputProps，并将它们扩展到 TextField 的 inputProps，然后使用 maxLength 添加到其中。process.env 值只是存储在我的 create-react-app 的 .env 文件中的值。

别客气。