MUI：TextField 不支持具有 maxLength 限制的类型数字如何修复？

Question

我尝试将 maxLength 应用于 TextField 组件，而类型为数字，但它不起作用。

我的代码是：

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

Answer 1

查看文档后发现默认不支持。在我使用 slice() 方法做了一些自定义逻辑并接受输入逻辑之后，下面的一些内容对我有用。

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    const _onChange = useCallback(e => {
        if (maxLength && parseInt(maxLength) >= e.target.value.length) {
            handleChange(e)
        }
    })

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

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={modifiedValue || ''}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={_onChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}