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

Posted 2023-02-21

【中文标题】与 debounce、event.persist() 和在父组件中存储值一起使用时，输入不起作用

【英文标题】：Input doesn't work when used with debounce, event.persist() and storing value at parent component

【发布时间】：2020-02-02 11:48:19

【问题描述】：

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

代码沙盒示例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>
    );
  

【问题讨论】：

我认为组件的职责在这里不是很清楚。我会使用以下架构：有一个带有内置去抖动功能的文本字段。它应该具有具有实际文本字段值的状态，但向上传递更改会去抖动。它的父级（MyTextField）应该处理异步操作，并且不需要将任何字段值传递给文本字段。你怎么看？

【参考方案1】：

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

【参考方案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;

希望对你有帮助！！！