使用材质UI文本字段的react-hook-form限制长度和类型

问题描述

鉴于下面的代码，我无法限制用户可以输入文本字段并控制输入类型的位数。

如果我删除了type: "number"，则可以控制输入长度 ，但现在可以输入字母了。

如果我删除了maxLength: 4，则输入长度无法受到控制，但字母不再允许。

如果如下所示设置inputProps={{ maxLength: 4,type: "number" }}，则仅强制执行type: "number"输入约束。

该如何解决？

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const useStyles = makeStyles((theme) => ({
  root: {
    "& > *": {
      margin: theme.spacing(1),width: "25ch"
    }
  }
}));

export default function BasicTextFields() {
  const classes = useStyles();

  return (
    <form className={classes.root} novalidate autoComplete="off">
      <TextField
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        inputProps={{ maxLength: 4,type: "number" }}
      />
    </form>
  );
}

解决方法

maxlength不适用于数字输入，您需要使用最小值和最大值的组合。

用户仍然可以输入超过最大数量的值，但是验证将显示为错误。如果他们使用微调器，那将是它将达到的最大值。

"columns": [
            { "data": "cpc_id" },{ "data": "cpc" },{ "data": "message" },{ "data": "name" },{ "data": "active" },{
                "mDataProp": function ( data,type,full,meta) {
                    var $table_fulldata=JSON.stringify(data);
                    $return_data='<a class="btn btn-info btn-sm edit-lead-attribute-message" href="#"><i class="fas fa-pencil-alt"></i></a>';
                    $return_data+='<a style="margin-left: 2px;" class="btn btn-danger btn-sm remove-lead-attribute-message" href="#"><i class="fas fa-trash"></i></a>';
                    $return_data+="<input type='hidden' name='cpc_id' class='cpc_id' value='"+(data.cpc_id)+"'>";
                    return $return_data;
                }
            },],

label {
  display: block;
}