Вход, который меняет свое значение на минимальное или максимальное значение - PullRequest
Новая
       63

Вход, который меняет свое значение на минимальное или максимальное значение

1 голос
/ 22 апреля 2020

Мне нужно числовое поле, которое ограничивает его диапазон, поэтому, когда вы устанавливаете значение меньше минимального значения, оно превращается в минимальное значение, а когда вы устанавливаете значение, превышающее максимальное значение, оно меняется на максимальное значение.

Я пытался это с debounce, но он делает переход для каждого di git. Если бы я мог игнорировать события onChange, кроме последнего, это было бы правильно.

Это мой компонент: 

import React, { useState } from 'react';
import { debounce } from 'lodash'

const MinMaxField = ({ name, value, error, onChange, min, max, placeholder }) => {
    const [internalValue, setInternalValue] = useState(value)

    const correctInput = debounce(inputValue => {
        const validValue = inputValue < min ? min : inputValue > max ? max : inputValue
        setInternalValue(validValue)
        onChange(validValue)
    }, 1200)


    const handleChange = (event) => {
        const inputValue = event.target.value;
        setInternalValue(inputValue)
        correctInput(inputValue)
    }

    return (
        <div className="form-group">
            <input
                className={`form-control ${error ? 'is-invalid' : ''}`}
                type={'number'}
                name={name}
                value={internalValue}
                placeholder={placeholder || ''}
                onChange={handleChange}
            />
            {error && <span className="invalid-feedback">{error[0]}</span>}
        </div>
    )
}

export default MinMaxField;

Так есть ли какая-либо библиотека или метод, чтобы заставить его работать правильно?

...