javascript - 按下按钮后在 React 中重新填充/刷新表

问题描述

我有一个input-text允许用户写订单号的，我有一个button验证订单是否存在或是否已经使用过的。

如果订单有效，则应检索该订单的产品（mongodb和meteor）及其详细信息。用户第一次验证订单时，它工作得很好。button但是，如果用户输入另一个订单，除非用户再次按下（按下一次之后），否则表格不会重新填充。这是一个动态表。

//Validating the order and Bringing the data of that Order
  validateOrder = () => {
const { products, productsPackaging, anotherCai } = this.state;
const cai = document.getElementById('cai').value;
if (cai && cai !== '') {
  this.setState({ validating: true });
  Meteor.call('getcai', cai, (err, res) => {
    this.setState({ validating: false });
    if (!err) {
      if (res.validated) {
        toastr.success('...');
      } else {
        toastr.info('...');
      }
      const tempProducts = [];
      const tempProductsPackaging = [];
      let tempCounter = 0;
      let tempAnotherCai = false;
      console.log(res);
      if (res.products && res.products.length > 0) {
        if (productsPackaging.length > 0) {
          tempAnotherCai = true;
        }
        for (let index = 0; index < res.products.length; index++) {
          const element = { fakeId: `id-${index}`, articleId: res.products[index].Articulo_Id, originalAmountPills: res.products[index].amount };
          const element2 = { ...res.products[index], fakeId: `id-${index}` };

          tempProducts.push(element);
          tempProductsPackaging.push(element2);
        }
        tempCounter = res.products.length - 1;
      }
      this.setState({
        validated: res.validated,
        productsPackaging: tempProductsPackaging,
        products: tempProducts,
        counterId: tempCounter,
        anotherCai: tempAnotherCai,
      });
    } else {
      toastr.info(err.error);
    }
  });
} else {
  toastr.info('...');
    }
  }

表格和按钮

      render() {
    const {
      products, validated, validating,
    } = this.state;
    return (
      <div className="modal fade" id="modalNewPackaging" tabIndex="-1" role="dialog" aria-labelledby="modalNewPackaging" aria-hidden="true">
        <div className="modal-dialog modal-dialog-centered" role="document" style={{ width: 1200, maxWidth: 'none' }}>

          <div className="modal-content" style={{ overflow: 'auto' }}>
            <div className="modal-header border-0">
              <h5 className="modal-title text-center">Agregar de Forma Manual</h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
    //Order Input
                  <div className="row form-group">
                    <div className="col-6">
                      <input
                        required
                        id="cai"
                        type="text"
                        className="form-control text-primary"
                        style={{ borderColor: '#001689' }}
                        aria-describedby="inputGroup-sizing-sm"
                        aria-label="Small"
                        placeholder="CAI"
                        autoComplete="off"
                      />
    
                    </div>
                    <div className="col-6">
                      {
                        validating ? (
                          <LoaderComponent />
                        ) : (
    //Button that Validates the Order
                          <button onClick={this.validateOrder} type="button" className="btn btn-success">Validate</button>
    
                        )
                      }
                    </div>
    
                  </div>
                  <form>
                    <div className="row form-group">
    
                      <div className="col-12">
                        <input
                          id="nameClient"
                          type="text"
                          maxLength="50"
                          className="form-control text-primary"
                          style={{ borderColor: '#001689' }}
                          aria-describedby="inputGroup-sizing-sm"
                          aria-label="Small"
                          placeholder="Nombre de Paciente"
                          autoComplete="off"
                          disabled={!validated}
                        />
                      </div>
                    </div>
                    {
                      validating ? (
                        <LoaderComponent />
                      ) : validated ? (
                        <div className="container">
                          <div className="container" style={{ maxHeight: '250px', overflowX: 'auto', overflowY: 'auto' }}>
    
                            <div className="card">
                              <div className="card-body">
    
                                <table className="table" style={{ width: '100%' }}>
                                  <thead>
                                    <tr>
                                      <th>Product's Name</th>
                                         ...
                                    </tr>
                                  </thead>
                                  <tbody>
                                    {
                                      products.map((product, index) => (
                                        <tr key={product.fakeId}>
                                          <td>
                                            <input
                                              required
                                              defaultValue={this.defaultValue(product.fakeId, 'productName')}
                                              id={`productName${product.fakeId}`}
                                              name="productName"
                                              type="text"
                                              className="form-control"
                                              style={{ borderColor: '#001689' }}
                                              autoComplete="off"
                                              list="suggestions"
                                              
                                            />
              

                            </td>
                                              //...
  ))
                                }
                              </tbody>
                            </table>
                </div>
              </div>
            </div>
          </div>
                  );
  }
}

默认值

defaultValue = (fakeId, inputName) => {
    const { productsPackaging, anotherCai } = this.state;
    const index = productsPackaging.findIndex(function findIt(item) {
      return item.fakeId === fakeId;
    });

    if (index === -1) {
      return '';
    }
    // console.log(fakeId);
    // console.log(index);
    // console.log('Iam in');
    if (inputName.includes('productName')) {
      console.log(productsPackaging[index].Articulo_Nombre);
      //if (!anotherCai) {
      return productsPackaging[index].Articulo_Nombre;
      // } else {
      //   document.getElementById(`productName${fakeId}`).value = productsPackaging[index].Articulo_Nombre;
      // }
    }

  }

标签： javascriptreactjsmongodbmeteor

javascript - 按下按钮后在 React 中重新填充/刷新表

问题描述

解决方案

推荐阅读