reactjs - react 数据表的输入字段在键入后失去焦点

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}
            />

Answer 1

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