当前位置: 代码迷 >> 综合 >> react antd protable内的Input输入框每次输入失去焦点
  详细解决方案

react antd protable内的Input输入框每次输入失去焦点

热度:56   发布时间:2023-11-26 00:26:04.0

最后发现是我将rowKey={RndNum};

RndNum是一个函数

// 获取一组十位数的随机数
function RndNum() {var rnd = '';for (var i = 0; i < 10; i++) rnd += Math.floor(Math.random() * 10);return rnd;
}

正是因为这个原因,导致我的输入框每次输入一个字符,就会失去焦点。

解决办法: rowKey="key",rowKey内直接使用值,而不是传入一个函数

完整代码如下:

import { Form, Input, Radio, Modal, message, Button, Select } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import { useRef, useState, useEffect } from 'react';
import _ from 'lodash';
import ProTable from '@ant-design/pro-table';
import styles from '../../../common.less';const { Option } = Select;const PutInSingleModal = (props) => {const PutInRef = useRef();const [form] = Form.useForm();const [basicTableData, setBasicTableData] = useState([{ key: 1 }]);useEffect(() => {setBasicTableData([{ ...basicTableData[0], ...props.values }]);}, [props.values]);const columns = [{title: '设备型号',dataIndex: 'equipModel',},{title: 'CSN',dataIndex: 'equipCsn',},{title: 'SN',dataIndex: 'equipSn',render: (text, record) => {return (<div><Inputstyle={
   { width: '100%' }}onChange={(e) => onChangeParam(e.target.value, 'equipSn')}allowClearplaceholder="请输入"value={record?.equipSn || ''}/></div>);},},];const onOk = () => {};function onChangeParam(value, type) {let newParam = _.cloneDeep(basicTableData);newParam[0][type] = value;setBasicTableData(newParam);}return (<ProTablestyle={
   { flex: 1, overflow: 'hidden' }}rowKey="key"collapseRender={false}dataSource={basicTableData}//自定义搜索栏按钮search={false}toolBarRender={false}options={false}columns={columns}pagination={false}bordered/>);
};export default PutInSingleModal;

  相关解决方案