为使用自由独奏的 Material-UI AutoComplete 设置最大长度。

Question

所以我当时使用的是Material-UI自动完成，"free solo "设置为true，并试图限制你可以输入的字符数。

仅供参考，那是使用"@material-uicore"。"^4.10.0"，"@material-uilab": "^4.0.0-alpha.54"。

我试着在TextField内部的InputProps上添加maxLength作为属性，但没有任何效果。我决定把答案贴出来，我想明白了，因为它并不明显。

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 不是一回事。 从MUI关于TextField的文档中.......

• inputProps: 应用到输入元素的属性。
• InputProps: 应用于输入元素的属性。应用于输入元素的道具。它将是一个FilledInput, OutlinedInput或Input组件，这取决于变量道具值。

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

2) 在自动完成中，TextField是自动完成本身的一个子组件。 为了保持AutoComplete功能的甜美，你必须将TextField传递给AutoComplete的子组件。自动完成的inputProps到TextField。

因此这一行。

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

就是说，使用spread操作符，抓取params中所有的inputProps， 然后把它们分散到TextField的inputProps中， 然后用maxLength添加到它上面。 那个process.env值只是存储在我的create-react-app的.env文件中的一个值。

不客气。