首页 > 解决方案 > React:输入类型号,maxLength 不起作用?

问题描述

假设我试图在输入字段中获取 10 个数字,但 maxLength 属性不适用于 type='number',尽管它适用于 type='text'。

import React, { Component } from 'react'
export default props => {
  const {
    handleInput
  } = props;

  return (
    <div>
      <span>+92</span>
      <input type='number' placeholder='Phone Number' maxLength={10} onChange={handleInput}/>
    </div>
  )
}

上面编写的代码片段中缺少什么?

一种可能的解决方法是,我在输入标记中使用 value 的属性并将输入类型设为文本,并通过编写 onChange 函数继续测试来自正则表达式的输入值。

标签: javascripthtmlreactjs

解决方案


这是一个普通的 HTML 元素,与 React 无关。

对于输入,类型号被忽略,您应该实现自己的验证。根据 Mozilla 文档:https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-maxlength


推荐阅读