当与 debounce、event.persist() 一起使用并在父组件中存储值时，输入不起作用

Question

我需要一个带有去抖动搜索的输入字段，值应该从父组件传递。但是当值从父组件传递时它不起作用。正确的实施方式是什么？

Codesandbox 示例 https://codesandbox.io/embed/debounce-input-owdwj

带有去抖动的文本字段

class MyTextField extends Component {
  search = _.debounce(event => {
    this.props.onChange(event.target.value);
  }, 300);

  handleChangeInput = event => {
    event.persist();

    this.search(event);
  };

  render() {
    return (
      <TextField
        value={this.props.value}
        placeholder="type"
        onChange={this.handleChangeInput}
      />
    );
  }
}

存储文本字段值的父组件

class Form extends Component {
  state = {
    value: ""
  };

  handleChangeInput = value => {
    this.setState({
      value
    });
  };

  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <MyTextField
          value={this.state.value}
          onChange={this.handleChangeInput}
        />
      </div>
    );
  }
}

Answer 1

这里的问题是您仅在 300 秒后才更新组件，这也不会更新输入框。首先，只要有 keyup，您就需要更新搜索框组件，之后 300 秒后可以通知家长有关更改的信息我已经更新了您的代码参考，请查看 https://codesandbox.io/embed/debounce-input-gm50t

Answer 2

在 componentDidMount 中声明你的 debounce 函数就可以了。

1) 无状态

class MyTextField extends Component {
  handleChangeInput = e => {
    this.search(e.target.value)
  };

  componentDidMount() {
    this.search =_.debounce((value) => {
      this.props.onChange(value);
    }, 300)
  }

  render() {
    return (
      <TextField
        value={this.props.value}
        placeholder="type"
        onChange={this.handleChangeInput}
      />
    );
  }
}

export default MyTextField;

2) 状态：

class MyTextField extends Component {
  state = {
    textValue: ''
  }

  handleChangeInput = e => {
    this.setState({
      textValue: e.target.value
    }, () => { this.search()})
  };

  componentDidMount() {
    this.search =_.debounce(() => {
      this.props.onChange(this.state.textValue);
    }, 300)
  }

  render() {
    return (
      <TextField
        value={this.props.value}
        placeholder="type"
        onChange={this.handleChangeInput}
      />
    );
  }
}

export default MyTextField;

希望对您有所帮助！！！

当与 debounce、event.persist() 一起使用并在父组件中存储值时，输入不起作用

Input doesn't work when used with debounce, event.persist() and storing value at parent component

javascript

debouncing

reactjs