React-Select onChange 存储要传递给 API 调用的值

问题描述

我正在开发我的第一个网络应用程序并启动了这个应用程序，我在更改 API 获取请求的 URL 时遇到问题。我正在使用 react-select 创建一个下拉菜单，我希望下拉选择更改搜索条件，例如：

我有一个 baseurl.com/

并希望根据下拉选择创建一个变量，以附加到 baseurl。 我从下拉菜单中的两个选项是“姓名”和“生日”， 如果您选择“名称”，则 URL 将是 baseurl.com/Patient?name= + inputvalue。

如果您选择“生日”，则 URL 将是 baseurl.com/Patient?birthdate=eq + inputvalue

我想保持 baseURL 原样，因为我最终必须向选择添加更多选项。我已经在我的应用程序中使用了输入值，所以我相信我不需要对其进行更改。

到目前为止，这是我的一些代码，当我进行选择时，它给了我一个“无法读取未定义的属性'值'错误”。此外，我还没有让组件将状态存储为变量，但是当涉及到它时我会过桥?任何见解表示赞赏，谢谢：

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>
    );
  }

'''

解决方法

handleChange 应该是：

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

selectedOption 类型为：

{
 value: string,label: string
}

,

想通了，感谢 armin yahya 为我指明了正确的方向，因为我不知道 selectedOption 类型。这是我最终编写的内容，使我的 handleChange 函数正常工作并更新 API 调用的 URL：

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