Отмена действия при изменении входного значения - PullRequest
Новая
       21

Отмена действия при изменении входного значения

0 голосов
/ 16 января 2019

Я пытаюсь отменить действие при изменении значения элемента Input.Это действие перехвачено сагой и сделан HTTP-запрос.Сначала я попытался сделать: 

<Input
  name='name'
  value={this.props.finish.name}
  placeholder='Ex: My application'
  onChange={event => this.saveAppName(event.target.name, event.target.value)}
/>

private saveAppName = debounce((name: string, value: string) => {
  if (value.length) {
    this.props.dispatch(changeInputFinish({name, value}));
  }
}, 500);

Решение, приведенное выше, сработало, но я не могу быстро набрать в поле ввода.Если я это сделаю, то Input не захватывает все.

После этого я попытался изменить метод "saveAppName" на: 

private saveAppName = (name: string, value: string) => {
  if (value.length) {
    debounce(this.props.dispatch(changeInputFinish({name, value})), 500);
  }
}

Приведенный выше код позволяет мне печатать что-либо кактак быстро, как я хочу внутри элемента Input, но в итоге получаю сообщение об ошибке и вырываю приложениеОтображается ошибка «Ошибка типа: ожидаемая функция».Это ошибка от lodash debounce.Он ожидает функцию, но действие «changeInputFinish ({name, value})» возвращает объект действия, а не функцию.

Чтобы попытаться решить эту проблему, я попытался заставить действие вернуть новую функциювместо объекта действия с кодом ниже: 

private saveAppName = (name: string, value: string) => {
  if (value.length) {
    debounce(() => this.props.dispatch(changeInputFinish({name, value})), 500);
  }
}

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

Кто-нибудь знает, как я могу решить эту проблему?По сути, мне нужно отменить действие, которое захватывает сага, которая делает http-запросы.Должен ли я попытаться отыграться в моей саге, а не в компоненте, поскольку я пытаюсь улучшить производительность моих HTTP-запросов?

Спасибо.

1 Ответ

0 голосов
/ 16 января 2019

Вам нужно передать функцию, возвращаемую debounce: 

handleChange = event => _.debounce(() => {
    this.saveAppName(event.target.name, event.target.value)
}, 150);

...

<Input
  name='name'
  value={this.props.finish.name}
  placeholder='Ex: My application'
  onChange={this.handleChange}
/>

Тим

P.S. Запрещается отправлять встроенные замыкания в качестве реквизита подкомпоненту, поскольку они будут воссоздаваться для каждого рендера, что также вызывает необходимость повторного рендеринга подкомпонента (поскольку реквизиты будут изменены). Вы должны создать свою функцию один раз и каждый раз передавать ту же самую функцию, как я сделал здесь.

...