web-dev-qa-db-ja.com

React JSの入力タイプ番号でテキストフィールドの長さを制限し、E、e、-、+などの入力を防ぐ方法

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"
              />
reactjstextfield
4
Praveen George

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>
3
Arman Charan

  • 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)
   }
 }
2
Mahesh Gajera