如何解决React-Antd在外部单击以获取干净元素ID
我使用Antd在React应用程序上工作,该应用程序具有元素列表,并且当您单击元素名称时,会出现一个Input组件以允许您编辑名称。这项工作很好,但是当发生外部单击时,我需要输入组件消失并再次显示元素名称。
我尝试了几种方法,但目前无济于事。
我做的最后一个测试是从这里的一些代码中获得的,但是它不起作用
这是我的输入/元素名称逻辑:
<List
grid={{ gutter: 24,xs: 2,sm: 2,md: 3,lg: 4,xl: 5,xxl: 5 }}
loading={isScreenLoading}
dataSource={
searchValue === null
? reportData
: functionSearch(reportData,searchValue)
}
renderItem={value => (
<List.Item>
<Card
className="configuration-report-list-card"
title={
editReportId === value.id ? (
<Input
ref={node}
defaultValue={value.name}
onChange={onNameChange}
onPressEnter={onEditReportName}
/>
) ...
这是我最后的尝试:
const onNameChange = event => setNewReportName(event.target.value);
const onEditReportName = () => {
editReportName(editReportId,{ name: newReportName }).then(() => {
fetchReportList({ flat: 'True' });
setEditReportId(null);
});
if (!isEditingReportName) {
// attach/remove event handler
document.addEventListener('click',OutsideClick,false);
} else {
document.removeEventListener('click',false);
}
setisEditingReportName(prevState => ({
isEditingReportName: !prevState.isEditingReportName,}));
};
const OutsideClick = e => {
// ignore clicks on the component itself
if (node.contains(e.target)) {
return;
}
onEditReportName();
};
我不确定Input的 ref ,但是在我搜索过的所有示例中,这似乎都是必要的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。