1

Cтолкнулся с такой задачей по рефакторингу, нужно настроить фильтр таким образом, чтобы обрабатывались значения с точкой(float).

const NumberRangeFilter = ({
  column: { filterValue, setFilter },
  debounceTimeout,
}) => {
  const [value, setValue] = useState([]);
  useEffect(() => setValue(filterValue), [filterValue]);

  const debounceSetFilter = useCallback(
    debounce(setFilter, debounceTimeout),
    [],
  );

  const setFilterAndValue = useCallback(
    newValue => {
      setValue(newValue);
      debounceSetFilter(newValue);
    },
    [debounceSetFilter],
  );

  const getNewValue = useCallback(
    newValue => (newValue ? parseFloat(newValue) : undefined),
    [],
  );

  return (
    <Box>
      <StandardTextField
        type="number"
        placeholder="От"
        value={(value && value[0]) || ''}
        onChange={({ target }) =>
          setFilterAndValue((oldValue = []) => [
            getNewValue(target.value),
            oldValue[1],
          ])
        }
      />
      <StandardTextField
        type="number"
        placeholder="До"
        value={(value && value[1]) || ''}
        onChange={({ target }) =>
          setFilterAndValue((oldValue = []) => [
            oldValue[0],
            getNewValue(target.value),
          ])
        }
        style={{ marginTop: '-5px' }}
      />
    </Box>
  );
};

Сам фильтр и то что он возвращает. С помощью console.log(getNewValue) я, скорее всего выявил корень проблемы. Получается, что при вводе значения в "От" и "До" на каждый новый символ вызывается parseFloat(newValue) и скорее всего это и является корнем проблемы, так как после ввода 5.50 (то есть после ввода точки), я получаю чистую 5 и дальнейшая обработка дробной части не происходит, и соответственно, если я ввожу От 5.30 До 5.50 получаю в результате только пункты со значением 5, то есть фильтр обрабатывает ввод как От 5 до 5. Если есть мнения, как можно решить данный вопрос, буду признателен.

NumberRangeFilter.defaultProps = {
  debounceTimeout: 0,
};

NumberRangeFilter.propTypes = {
  column: PropTypes.shape({
    filterValue: PropTypes.arrayOf(PropTypes.string),
    setFilter: PropTypes.func.isRequired,
  }).isRequired,
  debounceTimeout: PropTypes.number,
};

Также добавлю PropTypes, для большего понимания

1 ответ 1

0

Замени parseFloat на parseValue

    parseValue = (val)=>{
        if (val.match(/^[0-9]+[.]?[0-9]*$/)){//если только [числа] или [числа.числа] или [числа.]
           if(val.length >= 2 && val[0] === '0' && val[1] !=== '.'){//избегаем такой ввод 000.1
                 return parseFloat(val);
            }
            return val;
        }
        return parseFloat(val);//попробуем извлечь из строки числа
    }
3
  • Спасибо за решение, но к сожалению, данный метод, полностью отключает данный фильтр, после ввода значений получаю пункты с результатом 0, т.к. это дефолтное значение
    – IgorB
    27 янв 2022 в 15:38
  • @Igor Burletov, Какой ввод и что ожидается на выходе? Я так понял это поле которое должно принимать число, но игнорировать остальной ввод? 27 янв 2022 в 15:59
  • добавил PropTypes, я так понимаю, что arrayOf string
    – IgorB
    31 янв 2022 в 8:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.