如何在反應變量中獲取輸入值 onChange？

Question

我有一個搜索文本框，當我使用正常的 event.target 方法顯示錯誤時，我需要獲取值 onchange 將請求發送到 API。 如何在 onchange 中糾正它我需要用一些參數調用一個函數，所以我不能輕松地去。

我的文本框是：

<input className="ReactSearchBox" name="search" placeholder="Search Doctors" 
          onClick={() => {
            this.onProviderListing(this.state.skip,0);
            this.onEnable();
                  }}
          onChange={() =>this.onSearchProvider(this.state.skip,0)} />

我需要 onchange 值的函數是：

onSearchProvider(nSkip,nLimit,e){
      this.setState({
        limit:nLimit,
        skip:nSkip,
        listing: this.state.listing,
        searching: !this.state.searching
      })
      //console.log(nlimit);
      var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.TOKEN,
      }
      var _calObj = {initiatorId:localStorage.userid,visitType: "office", skip:nSkip,limit:"5", includeOfflineProviders:"true",searchQuery:"lo"}

我需要相應地在搜索查詢 onchange 中給出我的輸入值，請整理一下。

Answer 1

你不是從輸入傳遞事件。 將 onChange 道具更改為：

       <input className="ReactSearchBox" name="search"
          placeholder="Search Doctors" 
          onClick={() => {
            this.onProviderListing(this.state.skip,0);
            this.onEnable();
                  }}
          onChange={(e) =>this.onSearchProvider(this.state.skip,0, e)}
        />

onSearchProvider(nSkip,nLimit,e){
  const value = e.target.value; // text box value 
}

Answer 2

您還可以通過傳遞e事件對象來更新 jsx 中的onChange ，例如：

onChange={(e) => this.onSearchProvider(this.state.skip,0,e)}

在onSearchProvider您可以像這樣訪問它：

onSearchProvider(nSkip, nLimit, {target}){
   // you can see search box text here on change
   console.log(target.value) 
}

Answer 3

您不需要在 onChange 方法調用上傳遞狀態值。

狀態將在整個組件中保持一致。

<input className="ReactSearchBox" name="search" placeholder="Search Doctors" 
     onChange={() =>this.onSearchProvider(0)}
/>

您可以從該輸入的事件中獲取值作為event.target.value

onSearchProvider(nLimit,e){
  // access your state values directly here like this.state.skip
  const searching = e.target.value;
}