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

可以合并

isNaN()和Number以拒绝不评估为strings的{{1}}。

请参阅下面的实例。

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'))

Answer 2

您可以添加一个max属性，该属性将指定您可以插入的最大数字

<input type="number" max="999" />

您还可以指定范围的最小值

 <input type="number" min="1" max="999" />

Answer 3

在输入类型=“ 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)
   }
 }

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

3 个答案: