在反應中將下拉列表的選定值傳遞給 API

Question

嗨，當頁面加載時，我需要在dropdown列表中填充列表，因此我將其放入componentDidMount()中。

 componentDidMount() {
    axios.get(`http://localhost:8080/country_code`).then((res) => {
      const countryData = res.data;
      this.setState({ countryData });
    });
  }

此數據需要是下拉列表的一部分。

      <select id="dropdown">
        {this.state.countryData.map((countryData) => (
          <option key={countryData} value={countryData}>
            {countryData}
          </option>
        ))}
      </select>

列表顯示如下。

我的要求是，如果用戶 select dropdown list中的任何value都應在API中作為參數傳遞給backend 。

我需要在Select或Option中進行哪些更改。 我知道如何使用axios在reactjs中編寫調用 API 。我會管理的。 我的更新代碼如下。

<select id="dropdown" onChange={this.downLoadFile(e)}>
                {this.state.countryData.map((countryData) => (
                  <option key={countryData} value={countryData}>
                    {countryData}
                  </option>
                ))}
</select>



downLoadFile(e) {
    this.setState({ selectValue: e.target.value });
    alert(selectValue);
  }


this.state = {
      countryData: [],
      selectValue: '',
    };
    this.handleChange = this.handleChange.bind(this);
    this.downLoadFile = this.downLoadFile.bind(this);
  }

它不工作。 我做錯了什么？

Answer 1

您應該將 function 傳遞給 onChange 事件。 喜歡：

<select id="dropdown" onChange={(e) => {this.downLoadFile(e)}}>

或者

<select id="dropdown" onChange={this.downLoadFile}>

你這樣做的方式只是傳遞 this.downLoadFile 的返回值

Answer 2

您應該在更新選定的 state 后獲取 API。

downLoadFile(e) {
    this.setState({ selectValue: e.target.value }, () => {
      fetchSomeApi(this.state.selectValue).then((res) => {
         updateSomewhere(res);
      }).catch((error) => console.error(error));
    });
    alert(selectValue);
}

this.setState有第二個參數作為回調。 所以你可以在 state 更新事件之后使用它。

此外，您可以更新 function 調用。

onChange={this.downloadFile)