Reactjs 如何处理输入字段上的更改，以及反Bounce函数

我希望能够动态地更改输入标记内的value属性，但也可以将初始值设置为某些文本

我只想在用户停止键入后发送一个API请求，因此我使用了一个debounce函数，问题是我无法继续将输入字段更新为用户类型

class App extends React.Component {
  static propTypes = {
  };

  constructor() {
    super();
    this.state = {
      tag: 'art',
      searchTerm: 'art'

    };
  }

  callApi = debounce ((searchTerm) =>{
        this.setState({searchTerm:searchTerm});
  },5000) 

  onSearchHandler = searchTerm =>{
    this.setState({tag:searchTerm})
    this.callApi(searchTerm)
  }


  render() {
    return (
      <div className="app-root">
        <div className="app-header"> 
          <h2>Flickr Gallery</h2>
          <input 
              className="app-input" 
              onChange={event => {this.onSearchHandler(event.target.value)}}
              value ={this.state.tag}
              />
        </div>
        <Gallery tag={this.state.searchTerm}/>
      </div>
    );
  }
}

类应用程序扩展了React.Component{
静态类型={
};
构造函数（）{
超级（）；
此.state={
标签：“艺术”，
搜索词：“艺术”
};
}
callApi=debounce（（搜索术语）=>{
this.setState（{searchTerm:searchTerm}）；
},5000) 
onSearchHandler=searchTerm=>{
this.setState（{tag:searchTerm}）
this.callApi（searchTerm）
}
render（）{
返回(
Flickr画廊
{this.onSearchHandler（event.target.value）}
值={this.state.tag}
/>
);
}
}

---

如果我将从输入字段中删除value属性，那么一切都很好，那么我如何添加value属性并仍然按需更改它，但仅在X秒后发送请求？

当您只想取消api请求时，您似乎正在取消状态更新的通知。您将希望总是在更改时更新您的状态，然后取消api请求的冻结。e、 g:

callApi = debounce(() => {
  /** your API call */
}, 5000)

onSearchHandler = searchTerm => {
  this.setState({ tag:searchTerm });
  this.callApi();
}

---

原因是，通过基于状态设置/更新值，您已经创建了一个受控组件（有关更多详细信息，请参阅React文档），并且您正在取消对其值的更新。

因此，如果Gallary组件中有一个callAPI函数，我应该在其中调用它，对吗？如何将调用从应用程序控制器传递到gallery component callAPI函数？如果您的gallery组件正在根据其标记属性的更改进行搜索，则需要将搜索词值和标记分开。在这种情况下，您可以：-onChange回调中的setState（{searchTerm}）-使用searchTerm状态作为输入值-取消第二次调用以更新标记状态。因此，如果我正确理解了类似的内容（代码是编辑的），我可以问一下您是如何将代码添加到注释时钟的吗？是的，您的代码编辑似乎是一致的。注释中的代码只能使用反勾号内联项目-请参阅详细信息