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 (将#修改为@）

antd reactjs reactjs