React-Select onChange 存儲要傳遞給 API 調用的值

Question

我正在開發我的第一個網絡應用程序並引導這個應用程序，我在更改 API 獲取請求的 URL 時遇到問題。 我正在使用 react-select 創建一個下拉菜單，並且我希望下拉選擇來改變搜索條件，例如：

我有一個 baseurl.com/

並希望根據下拉選擇創建一個變量，將 append 到 baseurl。 我從下拉列表中選擇的兩個選項是“姓名”和“生日”，如果您使用 select“姓名”，則 URL 將是 baseurl.com/Patient?name= + inputvalue。

如果您是 select '生日'，則 URL 將為 baseurl.com/Patient?birthdate=eq + inputvalue

我想保持 baseURL 不變，因為我最終將不得不向 select 添加更多選項。 我已經讓 inputvalue 在我的應用程序中工作，所以我相信我不需要對其進行更改。

到目前為止，這是我的一些代碼，當我進行選擇時，它給了我一個“無法讀取未定義的屬性‘值’錯誤”。此外，我還沒有制作將 state 存儲為變量的組件，但我將在涉及到它時過橋任何見解表示贊賞，謝謝：

const choice = [
  {value : "Name", label: "Name" },
  {value : "bDay", label: "Birthday (YYYY-MM-DD)"} 
];    


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      inputValue: 'Search',
      queryResult: {},
      criteria: '',
      showSVG: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.getInputValue = this.getInputValue.bind(this);
    this.baseURL = this.baseURL.bind(this);
  }


  getInputValue(e) {
    this.setState({ inputValue: e.target.value });
  }

  handleChange(e) {
  this.setState({criteria: e.target.value});
  console.log(e.target.value);
  }

  baseURL(e) {
    const url = 'https://baseURL.com/';


[BLOCK FOR FETCH REQUEST]

render() {

    
    return (
      <div className="input-wrapper">
        {/* ON CHANGE SELECT */}
            <Select options={choice} value={this.state.criteria} onChange={this.handleChange} />
              
        <input
          type="text"
          value= {this.state.inputValue}
          onFocus = {() => this.setState({ inputValue: '' })}
          onChange={this.getInputValue}
          onKeyDown={this.baseURL}  />
       <img className={this.state.showSVG ? "isVisable" : ""} src="assets/icons/grid.svg" />  
        { Object.keys(this.state.queryResult).length !== 0 ? <PatientInfoBlock data={this.state.queryResult} /> : null }
        { !this.state.queryResult ? <h3>Sorry no results match ''{this.state.inputValue}''</h3> : null }
      </div>
    );
  }

'''

Answer 1

handleChange 應該是：

handleChange(selectedOption) {
  this.setState({criteria: selectedOption});
}

selectedOption 類型是：

{
 value: string,
 label: string
}

Answer 2

想通了，感謝 armin yahya 將我指向正確的方向，因為我不知道 selectedOption 類型。 這是我最后寫的，我的 handleChange function 工作正常，並為 API 調用更新 URL：

handleChange(selectedOption) {
  if(selectedOption.value == 'Name') {
      this.setState({criteria: 'Patient?name='});
    
  }
  if(selectedOption.value == 'bDay') {
    this.setState({criteria: 'Patient?birthdate=eq'});
    
    
  }