在 React 中重新渲染 select 元素后觸發 onChange 事件

Question

我有這 3 個 select 元素，每個元素都從后端獲取數據並將其用作選項。 如果省發生變化，城市會獲取數據，並且它還應該觸發 onChange 事件，以便 Barangay(Town) 可以獲取其數據。

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>

事件功能：

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

  };

  onChangeProvince = (e) => {
    this.handleChangeSelect(e, () => { return this.getAllCity });
  }

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

數據獲取函數：

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

  }

Answer 1

您可以使用componentDidUpdate或像您一樣將回調 function 傳遞給setState 。 但是您的回調僅返回內部 function，而不是調用它。 它應該是這樣的：

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

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

Answer 2

我只需要在 setState 執行中獲取數據時調用 onChange 函數並傳遞一個回調 function 將 state 更改為默認值（0）

手柄更改 function：

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

數據獲取 function

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

  }