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

Question

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

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

当我在 onchange 事件期间使用输入单元格时使用反应钩子组件，状态更改会导致组件刷新并且输入字段失去焦点。我查看了上面发布的 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,
      data,
    },
    useSortBy,
    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

Answer 1

我认为问题出在这里：

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