如何解决当用户输入时,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}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。