MUI：自动完成不支持具有 maxLength 限制的类型编号如何修复？

Question

我尝试将 maxLength 应用于自动完成组件，而类型为数字，但它不起作用

export default function Select({
    onChangeInput,
    label,
    name,
    value,
    options,
    placeholder,
    disabled,
    error,
    helpertext,
    required,
    shrink,
    maxLength,
    type
}) {

    const _onChange = useCallback((e, v) => {
        onChangeInput(v)
    })

    return (
        <Autocomplete
            freeSolo
            fullWidth={true}
            multiple={false}
            margin={'noraml'}
            readOnly={disabled}
            name={name}
            isOptionEqualToValue={useCallback((option, value) => option.label === value.label)}
            value={value}
            options={options}
            placeholder={placeholder}
            renderInput={useCallback(params => {
                return <TextField {...params}
                    type={type}
                    label={label}
                    error={error}
                    required={required}
                    helperText={helpertext}
                    variant={'standard'}
                    inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99}}
                    InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
                />
            })}
            onInputChange={_onChange}
        />
    )
}

Answer 1

我已经习惯了

inputProps

TextField Componet 的属性通过以下方式修改用户提供的值

export default function Select({
    onChangeInput,
    label,
    name,
    value,
    options,
    placeholder,
    disabled,
    error,
    helpertext,
    required,
    shrink,
    maxLength,
    type
}) {

    const _onChange = useCallback((e, v) => {
        if (maxLength && parseInt(maxLength) >= v.length) {
            onChangeInput(v)
        }
    })

    const modifiedValue = maxLength ? value?.slice(0, parseInt(maxLength)) : value

    return (
        <Autocomplete
            freeSolo
            fullWidth={true}
            multiple={false}
            margin={'noraml'}
            readOnly={disabled}
            name={name}
            isOptionEqualToValue={useCallback((option, value) => option.label === value.label)}
            value={modifiedValue}
            options={options}
            placeholder={placeholder}
            renderInput={useCallback(params => {
                return <TextField {...params}
                    type={type}
                    label={label}
                    error={error}
                    required={required}
                    helperText={helpertext}
                    variant={'standard'}
                    inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99, value: modifiedValue}}
                    InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
                />
            })}
            onInputChange={_onChange}
        />
    )
}