Question

我正在慢慢开始学习 TS 并将其实施到当前项目中，但是我卡住了，并没有真正理解出了什么问题。基本上我有具有数据集“模式”的按钮。点击按钮后，我启动确认栏（确认栏还不是 TSX）

<Button
      height={50}
      data-mode="MEMORY"
      onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
        ConfirmBar('You sure?', supportCommands, e)
      }
    >
      Format
    </Button>


const ConfirmBar = (message, action, parameter) =>
  confirmAlert({
    customUI: ({ onClose }) => {
      return (
        <ConfirmContainer>
          <Header main>{message}</Header>
          <ConfirmationButton
            confirm
            onClick={() => {
              action(parameter);
              onClose();
            }}
          >
            Yes
          </ConfirmationButton>
          <ConfirmationButton onClick={onClose}>No</ConfirmationButton>
        </ConfirmContainer>
      );
    },
  });

如果是，我希望启动函数来处理请求，它在打字稿之前工作正常，但现在它抛出错误。我希望能够访问数据集属性，如果你们能帮助我并解释为什么在添加打字稿后它现在不想工作，我会很高兴

 const supportCommands = (el: React.MouseEvent<HTMLButtonElement>) => {
// Tried already to use el.persist(), with target and currentTarget; here is example with attempting to assign value to variable but also doesn't work.
    const target = el.currentTarget as HTMLButtonElement;
    let elVal = target.getAttribute('data-mode');
    console.log(elVal, 'ELL');
  };

这就是我发生的错误：

<块引用>

警告：出于性能原因重用此合成事件。如果你看到这个，你正在访问方法 currentTarget 释放/无效的合成事件。这是一个无操作功能。如果你必须保留原始合成事件，使用 event.persist()。请参阅 fb.me/react-event-pooling 了解更多信息。

我知道 React 有自己的 SynthesisEvents 系统，但我认为它们在异步请求期间会导致问题，例如计时器等，在这种情况下，我看不出它为什么会出现问题

编辑：我通过添加到按钮 e.currentTarget 使它工作，然后在函数中只是做了 el.dataset，现在只是想弄清楚那是什么类型

Answer 1

这个 waring 是因为您正在重用 Event 对象。

您在这里通过了ConfirmBar('You sure?', supportCommands, e)

你在这里重复使用它action(parameter);

我不知道您需要从 paramenter 获得什么，但我想可能是这样的：

    onClick={(e) => {
        action(e);
        onClose();
    }}

我从来不需要使用 event 的 onClick。我能想到的唯一想法是 preventDefault 或 stopPropagation

与打字稿反应，按钮功能不起作用

1 个答案: