当用户输入时，React 输入失去焦点

问题描述

https://github.com/tannerlinsley/react-table/issues/3111

https://codesandbox.io/s/modest-booth-hei5d?fontsize=14&hidenavigation=1&theme=dark

当我在 onchange 事件期间使用输入单元格时使用 react 钩子组件，状态更改会导致组件刷新并且输入字段失去焦点。我查看了上面发布的 github 链接，但不是推荐的 react-table v6 修复的结果。我在反应表 7.6.3

const handleInitialDemandChange = (cell,e) => {
    const name = cell.row.original.id
    e.persist();
    setFieldValues({
      ...fieldValues,[name]: e.target.value
    });
  }

  function renderCells(cell) {
    console.log(cell.row)
    return (
      <div key={cell.row.original.id}>
        {cell.row.original.id == 0 ?
        <input style={{color: '#627FE3'}} value={cell.value} disabled /> :
        <input style={{color: '#627FE3'}}
          value={fieldValues[cell.row.original.id]} 
          onChange={(e) => handleInitialDemandChange(cell,e)}
        />}
      </div>
    )
  }

我的组件代码

<MyReactTable id="myReactTable" columns={[
          {
            Header: '',id: 'id',accessor: () => {},Cell: ({ cell }) => 
              <div style={{color: '#627FE3',display: 'flex',alignItems:'center'}}>
                {cell.row.canExpand ? (
                  <>
                    {
                      cell.row.isExpanded ?
                      <img
                        alt="expand"
                        src="/images/icons/expand.svg"
                        {...cell.row.getToggleRowExpandedProps({
                          style: {
                            paddingLeft: `${cell.row.depth * 2}rem`
                          }
                        })}
                        height="30"
                        width="30"
                      /> : <img
                        alt="collapse"
                        src="/images/icons/collapse.svg"
                        {...cell.row.getToggleRowExpandedProps({
                          style: {
                            paddingLeft: `${cell.row.depth * 2}rem`
                          }
                        })}
                        height="30"
                        width="30"
                      />
                    }
                  </>
                ) : null}
              </div>
          },{
            Header: 'Item',accessor: 'item'
          },{
            Header: 'Amount Paid',accessor: 'amount_paid',Cell: ({ cell }) => (
              <p style={{color: '#627FE3',cursor:'pointer',margin:0}} >
                {cell.row.values.amount_paid}
              </p>
            )
          },{
            Header: 'Initial Demand',accessor: 'initial_demand',Cell: ({cell}) => (renderCells(cell))
          },]} data={round1Summary || []}/>

MyReactTable.js

import React from 'react'

import CssBaseline from '@material-ui/core/CssBaseline'
import MaUTable from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'

import { useTable,useSortBy,useExpanded } from 'react-table'

import './index.css'

const MyReactTable = props => {
  const { columns,data,key,...rest } = props;
  const {
    getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,} = useTable(
    {
      columns,},useExpanded
  )
  return (
    <div>
      <CssBaseline />
        <MaUTable key={key} {...getTableProps()}>
          <TableHead>
            {headerGroups.map(headerGroup => (
              <TableRow {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <TableCell {...column.getHeaderProps(column.getSortByToggleProps())}>
                    {column.render('Header')}
                    <span>
                      {column.isSorted
                        ? column.isSortedDesc
                          ? ' ?'
                          : ' ?'
                        : ''}
                    </span>
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableHead>
          <TableBody>
            {rows.map((row,idx) => {
              prepareRow(row)
              return (
                <TableRow {...row.getRowProps()}>
                  {row.cells.map((cell,idx2) => {
                    return (
                      <TableCell {...cell.getCellProps()}>
                        {cell.render('Cell')}
                      </TableCell>
                    )
                  })}
                </TableRow>
              )
            })}
          </TableBody>
        </MaUTable>
    </div>
  )
}

export default MyReactTable

解决方法

我认为问题出在这里：

{cell.row.original.id == 0 ?
 <input style={{color: '#627FE3'}} value={cell.value} disabled /> :
 <input style={{color: '#627FE3'}}
  value={fieldValues[cell.row.original.id]} 
  onChange={(e) => handleInitialDemandChange(cell,e)}
 />
}

尝试创建一个输入：

 <input style={{color: '#627FE3'}}
    value={cell.row.original.id == 0 ? fieldValues[cell.row.original.id]: cell.value} 
    onChange={(e) => handleInitialDemandChange(cell,e)}
    disabled={cell.row.original.id == 0}
 />