react hooks中使用Ant design的table组件

table加悬浮表单，废话不多说，看图

表格的配置

const columns = [
	{
		title: '联系人',
		width: 100,
		render: item => {
			const {contactPerson, username} = item;
			return (
				<Popover
                     content={<div>
                                <Input value={peopleName} placeholder="请输入联系人" />
                                 <Button>确定</Button>
                                 <Button>取消</Button>
                        </div>}
                    trigger="click"
                    onClick={e => resetContact(item)}
                    visible={contactsVisible === username} // 控制显示和隐藏
                 >
                  <EditOutlined className="table-icon" />
                </Popover>
			)
		}
	}
]

重点，点击的时候不知道什么情况，出现了很多个，后来就把这个数据给赋值了一个唯一的值,项目中username是唯一的

const [contactsVisible, setContactsVisible] = useState('');
const resetContact = item => {
        setContactsVisible(item.username); //所以就显示了一条
};

重点悬浮框不显示

setContactsVisible(''); //置空就不显示了

然后就出来了，如果没有出来，多调试几遍，一定是写的有问题，代码不会骗人