Question

让我说我想在“输入”字段中获取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>
  )
}

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

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

Answer 1

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

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

Answer 2

这不是100％反应的问题，而是HTML的问题。输入类型 number 具有一个max道具，输入类型 text 具有一个maxLength支柱。

因此，使用

时，您应该使用 max 而不是maxLength

<input type=“number” />

——————————

如果要允许用户输入4个或更少的数字，可以执行以下操作：

<input type=“number” max={9999} />

由于10000是5位数字，因此允许用户写4个或更少的数字

反应：输入类型编号，maxLength不起作用吗？

2 个答案: