Question

当输入元素的值更改时，我正在尝试消除动作。这个动作由一个传奇人物捕获，并发出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元素内以所需的速度键入任何内容，但最终会检索错误并使应用程序崩溃。显示的错误是“ TypeError：预期功能”。这是lodash反跳的错误。它需要一个函数，但是动作“ changeInputFinish（{name，value}）”返回一个动作对象而不是一个函数。

为解决此问题，我尝试使用以下代码使操作返回一个新函数，而不是一个操作对象：

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

上面的代码没有检索到任何错误，但是它不允许我在Input中键入任何内容，所以我不知道这是否真的是解决方案。

有人知道我该如何解决这个问题？基本上，我需要对发出http请求的传奇动作进行反跳操作。因为要提高HTTP请求的性能，我应该在自己的传奇而不是在组件上进行反跳吗？

谢谢。

Answer 1

您需要传递反跳所返回的函数：

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。将内联闭包作为道具发送到子组件是一种反模式，因为它们将为每个渲染器重新创建，因此也强制子组件进行重新渲染（因为道具将被更改）。您应该创建一次函数，然后每次都传递相同的函数，就像我在这里所做的那样。

更改输入值时取消动作

1 个答案: