reactjs - 输入后 react-data-table 的输入字段失去焦点

Question

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

   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>
      )
    }
  ];

  const handleVariantListItemChange = (e,classname, idx=null) => {
    let listvariants = values.variant_list;
    if (classname === 'active') {
      listvariants[idx][classname] = e
    } else {
      listvariants[e.target.dataset.idx][classname] = e.target.value;
    }
    setFieldValue('variant_list', listvariants);
  };

 <DataTable
              columns={variantTableColumns}
              customStyles={variantTableStyles}
              striped={true}
              striped={true}
              fixedHeader={true}
              data={values.variant_list}
            />

标签： reactjsreact-data-table-component

Answer 1

因为在你的 onChange 中你调用了一些函数，它可能会改变<Input/>' 的值。正因为如此，Datatable 会重新呈现整行。为了解决这个问题，使用一个单独的组件，它有自己的状态和一个“完成”函数，应该在 onBlur 属性中调用。在您完成输入之前，不要更改您传递给该组件的任何道具。