Javascript 输入不'；当与debounce、event.persist（）一起使用并在父组件上存储值时，此选项不起作用

我需要一个输入字段与非公告搜索和值应该从父组件传递。但当值从父组件传递时，它不起作用。正确的实施方式是什么

代码沙盒示例

带去抖动的文本字段

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}
      />
    );
  }
} 

类MyTextField扩展组件{
搜索=u.debounce（事件=>{
this.props.onChange（event.target.value）；
}, 300);
handleChangeInput=事件=>{
event.persist（）；
本搜索（事件）；
};
render（）{
返回(
);
}
} 

存储文本字段值的父组件

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>
    );
  }
}

类表单扩展组件{
状态={
值：“”
};
handleChangeInput=值=>{
这是我的国家({
价值
});
};
render（）{
返回(
{this.state.value}
);
}
}

这里的问题是，您仅在300秒后更新组件，这不会同时更新输入框。首先，只要有一个keyup，您就需要更新搜索框组件，300秒后可以将更改的内容通知家长

---

我已经更新了您的代码参考，请检查它

在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;

类MyTextField扩展组件{
handleChangeInput=e=>{
this.search（例如target.value）
};
componentDidMount（）{
this.search=\ u.debounce（（值）=>{
this.props.onChange（值）；
}, 300)
}
render（）{
返回(
);
}
}
导出默认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;

类MyTextField扩展组件{
状态={
文本值：“”
}
handleChangeInput=e=>{
这是我的国家({
textValue:e.target.value
}，（）=>{this.search（）}）
};
componentDidMount（）{
this.search=u.debounce（（）=>{
this.props.onChange（this.state.textValue）；
}, 300)
}
render（）{
返回(
);
}
}
导出默认MyTextField；

---

希望有帮助

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