输入后反应数据表的输入字段失去焦点

Question

我使用react-data-table-component。我有一个动态列表，其中包含输入，如图所示。 每次我尝试在某个字段中编写文本时，它都会失去焦点，因此我无法编写。我做了很多尝试，包括放置自动对焦，向div和字段添加键。如果我使用简单变量（variantList）而不是字段值（values.variant_list），则会发生相同的情况。相同的代码适用于reactstrap表，如果我使用html表。我使用这个库是因为我将添加可扩展的行。所以这是下面的代码。任何帮助将不胜感激。

undefined

async function mainFunction () {
  return promiseFunction()
    .catch(error => {
      return throwingError();
    });
};

   const variantTableColumns = [
    {
      name: t('product.field.variant_name'),
      sortable: true,
      cell: row => <div>{row.name}</div>
    },
    {
      name: t('product.field.sku'),
      sortable: true,
      cell: row => (
         <div key={`variantlist1-${row.idx}`}  >
          <Input
            name={`sku-${row.idx}`}
            id={`sku-${row.idx}`}
            key={`sku-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'sku')}
            type="text"
            value={values.variant_list[row.idx].sku}
          />
        </div>
      )
    },
    {
      name: t('product.field.barcode'),
      sortable: true,
      cell: row => (
        <div key={`variantlist2-${row.idx}`}  >
          <Input
            name={`barcode-${row.idx}`}
            id={`barcode-${row.idx}`}
            key={`barcode-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'barcode')}
            type="text"
            value={values.variant_list[row.idx].barcode}
          />
        </div>
      )
    },
    {
      name: t('product.field.supplier_code'),
      sortable: true,
      cell: row => (
        <div key={`variantlist3-${row.idx}`}  >
          <Input
            name={`supplier_code-${row.idx}`}
            id={`supplier_code-${row.idx}`}
            key={`supplier_code-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'supplier_code')}
            type="text"
            value={values.variant_list[row.idx].supplier_code}
          />
        </div>
      )
    },
    {
      name: t('product.field.supply_price'),
      sortable: true,
      cell: row => (
        <div key={`variantlist4-${row.idx}`}  >
          <Input
            name={`supply_price-${row.idx}`}
            id={`supply_price-${row.idx}`}
            key={`supply_price-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'supply_price')}
            type="text"
            value={values.variant_list[row.idx].supply_price}
          />
        </div>
      )
    },
    {
      name: t('product.field.retail_price'),
      sortable: true,
      cell: row => (
        <div key={`variantlist5-${row.idx}`}  >
          <Input
            name={`retail_price-${row.idx}`}
            id={`retail_price-${row.idx}`}
            key={`retail_price-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'retail_price')}
            type="text"
            value={values.variant_list[row.idx].retail_price}
          />
        </div>
      )
    },
    {
      name: t('product.field.variant_active'),
      sortable: true,
      cell: row => (
        <div key={`variantlist6-${row.idx}`}  >
          <Switch
            name={`active-${row.idx}`}
            id={`active-${row.idx}`}
            key={`active-${row.idx}`}
            data-idx={row.idx}
            onChange={e=>handleVariantListItemChange(e,'active', row.idx)}
            checked={values.variant_list[row.idx].active}
            className="react-switch-block"
          />
        </div>
      )
    },
    {
      sortable: false,
      right: true,
      cell: row => (
        <div>
          <Button sm color="secondary" class="btn-sm" onClick={event => handleRemoveVariantListItem(event,row.id)}>
            <FontAwesomeIcon icon={faTrashAlt} style={{ fontSize: 14,  marginBottom: '1px' }} />
          </Button>
        </div>
      )
    }
  ];

Answer 1

由于在onChange中调用了某些函数，因此它可能会更改<Input/>的值。因此，Datatable重新呈现了整行。要解决此问题，请使用具有其自身状态和“完成”功能的单独组件，该组件应在onBlur属性中调用。并且在输入完毕之前，不要更改传递给该组件的任何道具。