Нужно получить последнее значение onChange для слайдера React - PullRequest
Новая
       34

Нужно получить последнее значение onChange для слайдера React

0 голосов
/ 26 октября 2019

Я использую ползунки пользовательского интерфейса для получения значений перед запросом. Есть ли способ получить значения ползунка только тогда, когда он перестал двигаться, а не каждый раз, когда он двигается? Я хочу избегать использования кнопки отправки, если это возможно.

Вот ссылка на демонстрационный материал пользовательского интерфейса, они используют onChange для захвата значений. Мне нужны только значения, когда слайдер остановлен, а не когда он меняется.

https://codesandbox.io/s/material-demo-sss3v

Ответы [ 2 ]

1 голос
/ 26 октября 2019

Я мог бы просто сделать простой тайм-аут для чего-то вроде этого. Вы можете просто определить, что, по вашему мнению, подходит, когда они «остановились», примерно через секунду все работает нормально. 

export default function RangeSlider() {
  var timeout;
  const classes = useStyles();
  const [value, setValue] = React.useState([20, 37]);

  const handleChange = (event, newValue) => {
    timeout && clearTimeout(timeout);
    timeout = setTimeout(() => {
      console.log('change');
      setValue(newValue);  
    }, 1000);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
    </div>
  );
}```
0 голосов
/ 26 октября 2019

Единственный способ узнать, завершен ли пользователь, - это использовать onChangeCommitted, но это работает только тогда, когда пользователь использует мышь для взаимодействия. Если пользователь использует клавиши со стрелками, то для каждого изменения будет срабатывать onChangeCommitted.

Вы можете подождать некоторое время, прежде чем выполнять поиск. Если есть несколько поисковых терминов, которые пользователь может изменить, вы можете использовать useDebounce продемонстрировано здесь код в demo.js 

const [search, setSearch] = React.useState({ slider1: 10, slider2: 10 });
const onChange = React.useCallback(
  (key, val) => setSearch(search => ({ ...search, [key]: val })),
  []
);
//start searching when user did not change anything for 5 second
//  I know it's a long time but demonstrates behavior more easily
const debouncedSearch = useDebounce(search, 5000);
// Effect for API call
React.useEffect(
  () => {
    console.log("user inactive for five seconds, going to search now");
  },
  [debouncedSearch] // Only call effect if debounced search term changes
);

Если вы выполните запрососновываясь на пользовательском вводе, вы должны обязательно что-то делать только с ответом last пользовательского ввода. Вы можете сделать это с эффектом отмены и продемонстрировано в коде выше и здесь . Если нет, вы можете получить неожиданные условия гонки.

...