如何在 React JS 中使用输入类型号限制文本字段长度并防止输入 E、e、-、+ 等

Question

1.我想将输入类型的文本字段长度限制为 6（这意味着只允许 0 到 999999 范围内的数字）。

2.即使它是数字类型，它也允许输入 E, e, -, + 。如何防止这种情况。

我试过设置 min=0、max=999999 和 maxlength=6 等，但没有一个对我有用。在下面给出我的输入字段代码。

              <TextField
                id="sampleFiled"
                label="VCode"
                type="number"
                required
                className="text-field"
                value={this.state.code}
                margin="normal"
              />

Answer 1

• 在 input type="number" 中插入以下函数

  <input type = "number" maxLength = "5" onInput={this.maxLengthCheck} />

• 反应功能

   maxLengthCheck = (object) => {
   if (object.target.value.length > object.target.maxLength) {
    object.target.value = object.target.value.slice(0, object.target.maxLength)
     }
   }
  

Answer 2

isNaN()和Number可以结合起来拒绝strings那些不评估为 的numbers。

请参阅下面的实际示例。

// Field.
class Field extends React.Component {
  
  // State.
  state = { value: '' }

  // Render.
  render = () => <input placeholder="Numbers only" value={this.state.value} onChange={this.handlechange}/>
  
  // Handle Change.
  handlechange = ({target: {value}}) => this.setState(state => value.length <= 6 && !isNaN(Number(value)) && {value} || state)

}

// Mount.
ReactDOM.render(<Field/>, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>