試圖消除搜索功能調用的反跳導致沒有事件傳遞給該功能

Question

我正在使用名為lodash的庫，使用它的debounce debounce()函數對搜索建議的限制api調用進行排序，即不是每次用戶更改字段時都調用api，而是對它進行反抖動並等待輸入完成后等待300毫秒：

在我的組件中看起來像這樣：

class myComponent extends Component {

  //Handle listing search
  searchListing(event) {
    console.log(event.target.value);
  }

  //Render
  render() {
    const listingSearch = _.debounce( () => { this.searchListing() }, 300  );

    return (
        <TextInput onChange={listingSearch}/>

    );
  }
}

它可以正常工作並調用該函數，但是我收到一條錯誤消息： Uncaught TypeError: Cannot read property 'target' of undefined

所以我試着通過這樣的事件：

const listingSearch = _.debounce( (event) => { this.searchListing(event) }, 300  );

現在錯誤說： Uncaught TypeError: Cannot read property 'value' of null檢查我傳遞的此事件后Uncaught TypeError: Cannot read property 'value' of null ，我可以看到它具有空目標，因此無法正常工作。

Answer 1

解決我的問題的方法是包括event.persist(); 在我的onChange處理函數中。

所以：

  searchListing(event) {
    event.persist();
    console.log(event.target.value);
  }