reactjs - 如何根据reactjs中的下拉选择隐藏显示表？

Question

我在 reactjs 中创建了一个视图，其中有一个下拉菜单。第一次加载页面时，下拉值是空白的。我用户在下拉列表中选择任何值，然后 api 命中并获得响应并在下表中显示响应。如果用户更改下拉列表中的值，则其他 id 的响应再次获取并显示表中的数据。直到这一切正常。但是当我在下拉列表中选择“选择一个”时，它是空的，然后我想隐藏表格。这种情况会引发错误

“未捕获的 DOMException：无法在 'Node' 上执行 'removeChild'：要删除的节点不是该节点的子节点。”

我进行了很多搜索，但没有找到任何适用于我的代码的好的解决方案。

handlePartnerChange = e => {   
    e.preventDefault(); 
    let val = e.target.value;
    console.log('val---->',val);
    this.setState({      
      hold_partner_id:val,
      syscoProductLoader:false,

    }, () => {
      if(val != '' && val != null && val != undefined){
        console.log('val is not empty===>', val)
        this.getAllSyscoProductByPartnerId(val);
      }else{
        console.log('val is empty===>', val)       

       this.setState({ syscoProductLists: [], apiError: "Please select the partner to display sysco product" },()=>{
         console.log('this.state---->',this.state);
         //$('#example').DataTable();

       });
      }
     // console.log("this.state----------->", this.state);
    });
  } 

<div className="main-body tableView">
                  {this.state.partnerLoader == true ? (
                    <Loader
                      type="TailSpin"
                      color="black"
                      height={80}
                      width={100}
                      style={{ textAlign: "center" }}
                    />
                  ) : this.state.partnerApiError == "" ? (
                    <div>
                      <button
                        type="button"
                        className="btn btn-darkone rightButton"
                        onClick={() => this.handleSyscoProductModalShowClick("Add", null)}
                      >
                        Add Product
                      </button>
                      <div className="page-header-title roleHeading bottom16">Sysco Product</div>
                      <label className="labelFont">Select Partner</label>
                      <select className="form-control tabelselect" style={{ border: "1px solid #818181" }} name="partnerId" value={this.state.hold_partner_id} onChange={this.handlePartnerChange}>
                        <option value="">Select one</option>
                        {this.state.partnerLists.map(
                          (partnerList, index) => (
                            <option
                              value={partnerList.id}
                              key={partnerList.id}
                            >
                              {partnerList.partner_name}
                            </option>
                          )
                        )}
                      </select>
                      <br />
                      <div>   
                       {/*  {this.state.hold_partner_id == "" ? (<div><b>Please select the partner to display products</b></div>) : ( */}
                            {this.state.syscoProductLoader == true ? (
                              <Loader
                                type="TailSpin"
                                color="black"
                                height={80}
                                width={100}
                                style={{ textAlign: "center" }}
                              />
                            ) :                            
                            this.state.apiError == "" ? (
                              <div>
                               <table
                            id="example"
                            className="table table-striped table-bordered table-responsive"
                          >
                            <thead className="tableHeadRow">
                                <tr>  
                                <th style={{ width: "1%" }}>ITEM NO</th>
                                <th style={{ width: "1%" }}>CASE SIZE</th>
                                <th style={{ width: "2%" }}>UOM</th>
                                {/* <th style={{ width: "1%" }} >CATEGORY</th> */}

                               {/*  <th style={{ width: "2%" }} >BRAND</th>
                                <th style={{ width: "1%" }} >PRODUCT</th>
                                <th style={{ width: "1%" }} >PRODUCT REBATE %</th>
                                <th style={{ width: "1%" }} >REBATE</th> */}
                                <th style={{ width: "1%" }} >PRODUCT REBATE $ PER CASE</th>
                                <th
                                  style={{ width: "3%", color: "transparent" }}
                                ></th>
                               </tr>  
                            </thead>
                            <tbody >
                              {this.state.syscoProductLists.map((syscoProductList, index) => (

                                <tr key={syscoProductList.id}>
                                  <td>{syscoProductList.Item_Number}</td>
                                  <td>{syscoProductList.Case_Size}</td>
                                  <td className="text-wrap">{syscoProductList.UOM}</td>
                                  {/* <td className="text-wrap"><p >{syscoProductList.category}</p></td> */}

                                 {/*  <td ><p >{syscoProductList.Brand} </p></td>
                                  <td ><p >{syscoProductList.Product}</p></td>
                                  <td className="text-wrap"><p >{syscoProductList.Rebate_%}</p></td>
                                  <td className="text-wrap"><p >{syscoProductList.rebate_factor}</p></td> */}
                                  <td className="text-wrap"><p >{syscoProductList.Rebate_$_per_case}</p></td>
                                  <td>
                                    <div className="btn-group pull-right roleBtnGroup" >
                                      <a
                                        title="View"
                                        style={{ width: "33%" }}
                                        className="btn btn-mini"
                                        onClick={e => {
                                          this.handleSyscoProductModalShowClick("View", syscoProductList);
                                        }}
                                      >
                                        <span className="mdi mdi-24px mdi-eye iconHover" />
                                      </a>
                                      <a
                                        style={{ width: "100%" }}
                                        className="btn btn-mini"
                                        title="Delete"
                                        onClick={() => this.handleConfirmModalShowClick(syscoProductList.id)}
                                      >
                                        <span className="mdi mdi-24px mdi-trash-can iconHover" />
                                      </a>
                                    </div>
                                  </td>
                                </tr>

                              ))}
                            </tbody>
                            {/* <tfoot>

                            </tfoot> */}
                          </table>
                          </div>
                            ) : (
                              this.state.apiError == 'Please select the partner to display sysco product'?(
                                <div>
                                <b>{this.state.apiError}</b>
                                </div>
                              ):(
                                <div>
                                <b>{this.state.apiError}</b>
                                <br/>
                                <button onClick={this.handleTryAgain}>Try Again</button>
                                </div>
                              )

                            )}
                  {/*   )} */}

                      </div>
                    </div>
                  ) : (
                        <b>{this.state.partnerApiError}</b>
                      )}
                </div>

标签： reactjsecmascript-6