Ввод не работает при использовании с 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

Объявите вашу функцию debounce в componentDidMount, все будет хорошо.

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;

Надеюсь, чтопомогает !!!

Answer 2

Проблема в том, что вы обновляете компонент только через 300 секунд, что также не обновляет поле ввода. Во-первых, вам нужно обновлять компонент окна поиска всякий раз, когда есть keyup, и позже родитель может быть проинформирован об изменении через 300 секунд. Я обновил ваш код ссылки, пожалуйста, проверьте его https://codesandbox.io/embed/debounce-input-gm50t