Javascript 在React中重新呈现select元素后触发onChange事件

我有这3个select元素，每个元素都从后端获取数据，并将其用作选项。如果省份发生变化，城市将获取数据，并应触发onChange事件，以便Barangay（镇）能够获取其数据

HTML/JSX模板：

  <div className="row mb-3">
          <div className="col">
            <Combobox label="Province" onChange={this.onChangeProvince} className="custom-select mr-1" id="selectProvince" options={createSelectItems(this.state.provinceData)} />
          </div>

          <div className="col">
            <Combobox label="City" onChange={this.onChangeCity} className="custom-select mr-1" id="selectCity" options={createSelectItems(this.state.cityData)} />

          </div>

          <div className="col">
            <Combobox label="Barangay" onChange={this.onChangeBarangay} className="custom-select mr-1" id="selectBarangay" options={createSelectItems(this.state.barangayData)} />
          </div>
  </div>

用于获取数据的函数：

 /** 
   * get all Province data
   */
  async getAllProvince() {
    let data = await fetchGet("http://localhost:3000/api/province/get/combobox");

    if (data !== false) {
      this.setState({ provinceData: data });
    } else {
      retryRequest(this.getAllProvince);
    }

  }

  /**
    * get all City data and append it to the Combobox
    */
  async getAllCity() {
    let data = await fetchGet(`http://localhost:3000/api/city/get/combobox/byparent/${this.state.selectProvince}`);
    if (data !== false) {
      this.setState({ cityData: data });
    } else {
      retryRequest(this.getAllCity);
    }

  }

  /**
   * get all Barangay data and append it to the Combobox
   */
  async getAllBarangay() {
    let data = await fetchGet(`http://localhost:3000/api/barangay/get/combobox/byparent/${this.state.selectCity}`);

    if (data !== false) {
      this.setState({ barangayData: data });
    } else {
      retryRequest(this.getAllBarangay);
    }

  }

---

您可以像以前一样使用

componentdiddupdate

或将回调函数传递给

setState

。但是回调函数只是返回内部函数，而不是调用它。应该是这样的：

  onChangeProvince = (e) => {
    // removed '{ return }' because there's no need on 1 liner
    this.handleChangeSelect(e, () => this.getAllCity());
  }

  onChangeCity = (e) => {
    this.handleChangeSelect(e, () => this.getAllBarangay());
  }

---

我只需要在setState执行中调用获取数据的onChange函数，并传递一个回调函数，将状态更改为默认值（0）

handleChange功能：

handleChangeSelect = (e, callback = function () { }) => {
    if (e.target) {
      this.setState({
        [e.target.id]: e.target.value
      }, callback());
    } else {
      this.setState(e, callback());
    }
  };

数据提取功能

   /**
    * get all City data and append it to the Combobox
    */
  async getAllCity() {
    let data = await fetchGet(`http://localhost:3000/api/city/get/combobox/byparent/${this.state.selectProvince}`);
    if (data !== false) {
      this.setState({ cityData: data }, this.onChangeCity({ selectCity: 0 }));
    } else {
      retryRequest(this.getAllCity);
    }

  }

  /**
   * get all Barangay data and append it to the Combobox
   */
  async getAllBarangay() {
    let data = await fetchGet(`http://localhost:3000/api/barangay/get/combobox/byparent/${this.state.selectCity}`);
    if (data !== false) {
      this.setState({ barangayData: data }, this.onChangeBarangay({ selectBarangay: 0 }));

    } else {
      retryRequest(this.getAllBarangay);
    }

  }

   /**
    * get all City data and append it to the Combobox
    */
  async getAllCity() {
    let data = await fetchGet(`http://localhost:3000/api/city/get/combobox/byparent/${this.state.selectProvince}`);
    if (data !== false) {
      this.setState({ cityData: data }, this.onChangeCity({ selectCity: 0 }));
    } else {
      retryRequest(this.getAllCity);
    }

  }

  /**
   * get all Barangay data and append it to the Combobox
   */
  async getAllBarangay() {
    let data = await fetchGet(`http://localhost:3000/api/barangay/get/combobox/byparent/${this.state.selectCity}`);
    if (data !== false) {
      this.setState({ barangayData: data }, this.onChangeBarangay({ selectBarangay: 0 }));

    } else {
      retryRequest(this.getAllBarangay);
    }

  }