Длина и нули

Question

У меня есть 2 входа, которые принимают диапазон минимальных и максимальных чисел. В их функциях inputChange я ограничил длину строки event.target.value, поэтому пользователь не может набрать больше, чем атрибут ввода по умолчанию max. Все работает хорошо, кроме ... если я наберу нули! В обоих входах я могу указать, сколько нулей я хочу (например, 000000000000000), и это намного больше, чем длина, которую я установил для него. Как это могло произойти? и как мне это исправить?

Приложение. js

class Generator extends React.Component {
    constructor (props) {
        super(props)
        this.state = { 
        onView: '0',
        minNum: 0 ,
        maxNum: 100
      } 
    }

    btnClick = () => {
      const { minNum, maxNum } = this.state;
      const min = Math.ceil(minNum);
      const max = Math.floor(maxNum);
      const x = Math.floor(Math.random() * (max - min + 1)) + min;
      return this.setState({ onView : x });
    }

    minRangeInputChange = (event) => {
      const { minNum, maxNum } = this.state;
      const typeNum = parseInt(event.target.value, 10)
      let numLength = event.target.value.length;
       if (typeNum > maxNum) {
            this.setState({ minNum: maxNum });
       } else if (numLength > 7) {
            numLength = numLength - 1
       } else {
            this.setState({ minNum: typeNum });
      }
      return console.log(minNum);
    }

    maxRangeInputChange = (event) => {
      const { minNum, maxNum } = this.state;
      const typeNum = parseInt(event.target.value, 10)
      let numLength = event.target.value.length;
       if (typeNum < minNum) {
          this.setState({ maxNum: minNum});
      } else if (numLength > 7) {
          numLength = numLength - 1
      } else {
          this.setState({ maxNum: typeNum })
      }
      return console.log(maxNum);
    }

  render() {

  return (
    <div className="container">
    <Instructions />
    <Range 
      max={this.state.maxNum} 
      min={this.state.minNum} 
      minChange={this.minRangeInputChange}
      maxChange={this.maxRangeInputChange}
      />
    <Generate currentClick={this.btnClick}/>
    <View show={this.state.onView}/>
    </div>
    );
  }
}

export default Generator;

Компонент диапазона:

class Range extends React.Component {
    constructor(props) {
        super(props)
        }
        render() {
    return (
        <div className="range">
            <h3>Minimum</h3>
                <input 
                type="number" 
                min="0"
                max="9999999"
                value={this.props.min} 
                onChange={this.props.minChange}
                id="minInput"
                required/>
            <h3>Maximum</h3>
                <input 
                type="number" 
                min="1"
                max="9999999"
                value={this.props.max}
                onChange={this.props.maxChange}
                id="maxInput"
                required/>
        </div>
        )
    }
}


export default Range;

Answer 1

Я не уверен, что numLength помогает во всем. Возможно, вы могли бы решить проблему с нулями, присвоив typeNum обратно event.target.value:

const typeNum = parseInt(event.target.value, 10)
event.target.value = typeNum.toString()