[输入数字时输入数字时验证错误

Question

我创建了一个输入数字，每当输入3到12之间的数字时，行中的列数将根据输入的数字进行操作，此处没有提交按钮。错误是：我无法通过键盘键入数字，每当我键入数字或删除键盘（输入新数字）时，就会出现我之前验证过的警报。我只能通过在输入中单击鼠标到上下箭头来调整数字。我想要的是可以通过键盘输入数字，也可以通过单击向上和向下箭头来调整数字。这可能是我的验证错误。请帮助我纠正它。谢谢！

``App.js
    import React, { Component } from 'react';
    import Validate  from './libs/validate'; 
    import pic01 from './images/pic_1.jpg'; 

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          number: 6};

      }

      handleChange = (event) => {
          let input = event.target.value;
          if(Validate.checkNum(input)===false){
            alert('Number of Columns range from 3 to 12')
          }else {
            this.setState({number: input})
          } 
          event.preventDefault();
          } 

      render() {
        let {number} = this.state;
        return (
      <div className="container">
        <p>Please a number between 3 and 12</p>
          <div  className="row">
             <div className="col-6">
             <form className="form-group">
                <label>Number of Column</label>
                <input type="number" name="number" value={number} onChange={this.handleChange} className="form-control" />
            </form>
          </div>
        </div>
     <div  className="row">
          <div className={`col-${number}`}>
            <div className="card mb-4">
              <img className="card-img-top" src={pic01} alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
           <div className={`col-${number}`}>
            <div className="card mb-4">
              <img className="card-img-top" src={pic01} alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div className={`col-${number}`}>
            <div  className="card mb-4">
              <img className="card-img-top" src={pic01} alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div className={`col-${number}`}>
            <div  className="card mb-4">
              <img className="card-img-top" src={pic01}alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div className={`col-${number}`}>
            <div  className="card mb-4">
              <img className="card-img-top" src={pic01} alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div className={`col-${number}`}>
            <div  className="card mb-4">
              <img className="card-img-top" src={pic01} alt="Card image cap"/>
              <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>




          </div>
          </div>

        );
      }
    }

    export default App;``

    ``validate.js

    class Validate {

        static isNumber(value) {
            return !isNaN(parseFloat(value)) && isFinite(value);
        }

        static checkNum(value)  {
            if(value < 3 || value > 12 || Validate.isNumber(value) === false ) {
                return false;
            }

            return true;
        }
    }

    export default Validate;``

Answer 1

也在您的验证中检查是否为空输入。

handleChange = (event) => {
          let input = event.target.value;
          if(input!=='' && Validate.checkNum(input)===false){ // add condition to not Validate for empty input
            alert('Number of Columns range from 3 to 12')
          }else {
            this.setState({number: input})
          } 
          event.preventDefault();
          }