在 React 中重新渲染 select 元素后触发 onChange 事件

Question

我有这 3 个 select 元素，它们中的每一个都从后端获取数据并将其用作它们的选项。如果省份发生变化，城市会获取数据，它也应该触发一个 onChange 事件，以便描笼涯（镇）可以获取它的数据。

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 或将回调函数传递给 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());
  }

Answer 2

我只需要调用 onChange 函数来获取 setState 执行中的数据，并传递一个将状态更改为默认值 (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);
    }

  }

在 React 中重新渲染 select 元素后触发 onChange 事件

Trigger an onChange event after a select element is re-rendered in React

html

javascript

event-handling

drop-down-menu

reactjs