reactjs - 如何在渲染页面时触发下拉列表事件

Question

实际上是在 url -> http://localhost:8080/?type=packages&packagecode=BAYSEEK中传递参数，使用 packagecode 我想绑定下拉列表中的值，当我在 url 中传递 packagecode 时它应该触发事件

 render(){

    const { placeholder, options, field, codefield, amount,query_code } = this.props;
    const { active, isMobile, filteredData } = this.state;
    let optionData = filteredData ? filteredData : options;
    let mobileOptions = [{route: placeholder}, ...options];

    // console.log("FRIENDS", JSON.stringify(field));

    let queriedPackage = null;
    if ( query_code !== undefined && optionData.length > 0) {
      queriedPackage = optionData.filter(data => data.PackageCode === query_code)[0]
    }
    console.log("queriedPackage",queriedPackage);
    console.log("optionData",optionData);
    return (
      // add the price
      // add the number toggle box

      <div className={active ? "selectbox active" : "selectbox"} id={field.name} data-selected={queriedPackage !== null ? queriedPackage.Name : field.value ? field.value : placeholder} onClick={(event) => this.toggleSelect(event)}>
        <ul>
        {/* {console.log("field.name",field.name,"queriedPackage",queriedPackage,"codefield",codefield,"placeholder",placeholder)} */}
          <li className="hidden"><InputField type="text" placeholder={placeholder} field={field} /></li>
          <li className="hidden"><InputField type="text" placeholder={placeholder} field={codefield} /></li>
    {!queriedPackage?optionData.map((option, index) => <li onClick={(event) => {
      console.log("calling event here",event);
      console.log("calling option here",option);
      this.updateSelectBox(event, option)}} key={index}>{option.route ? option.route : option.Name}</li>):<li onClick={(event) => {
         console.log("hellow calling else condition here");
        this.updateSelectBox.bind(event, queriedPackage)}} key={"1"}>{queriedPackage.route ? queriedPackage.route : queriedPackage.Name}</li>}

        </ul>
      </div>
    );
  }

标签： reactjs