时间戳

首页 > 解决方案 > React 合成事件 onAnimationStart 似乎没有正确触发并且没有传递事件

javascript - React 合成事件 onAnimationStart 似乎没有正确触发并且没有传递事件

问题描述

我的目标是确定浏览器是否使用反应钩子自动填充表单中的输入字段。其他堆栈溢出线程建议在 css 中创建以下内容：

@keyframes onAutoFillStart { }

@keyframes onAutoFillCancel { }

.input:-webkit-autofill {animation-name: onAutoFillStart;}

.input:not(:-webkit-autofill) {animation-name: onAutoFillCancel;}

这应该创建一个 void 动画事件，每当浏览器自动填充字段时就会触发该事件。

合成事件的React 文档建议使用合成事件，例如 onAnimationStart。可以使用属性 animationName 发现过渡的名称。

我不能让它工作。似乎有两个问题。字段自动填充时不会触发 onAnimationStart。它似乎在每次渲染元素时触发。此外，onAnimatinoStart 不返回事件，它返回一个包含该事件的所有元素的对象。

我尝试了几种选择：

选项1：

<input onAnimationStart={console.log(e)}/>

这将为具有此事件的每个元素记录一个对象。每次渲染元素时都会记录对象。

选项 2：

<input onAnimationStart={console.log(e.target)}/>

与选项 1 类似的行为，但输出未定义

选项 3：

<input onAnimationStart={handleAnimation(e)}/>
const handleAnimation = (e) =>{console.log(e)}

行为类似于选项 1

选项 4：

<input onAnimationStart={handleAnimation}/>
const handleAnimation = () =>{console.log"foo bar"}

“foo bar”没有被记录到控制台。

选项 5：

<input onAnimationStart={(e) => handleAnimation(e)}/>
const handleAnimation = (e) => {console.log("foo bar " + e)}

行为类似于选项 4。

我也尝试过用 onAnimationStartCaputure 替换 onAnimationStart 的相同选项。结果是相同的。

标签： javascriptreactjseventsreact-hooks

解决方案

您可以将本机事件作为合成事件的子事件访问

const handleAnimation = (e: any) => {
  console.log(e.nativeEvent.animationName);
};
export default function App() {
  return (
    <div className="App">
        <input
          id="email"
          name="email"
          className="input"
          onAnimationEnd={(e) => handleAnimation(e)}
           onAnimationStart={(e) => handleAnimation(e)}
        />
    </div>
  );
}

https://codesandbox.io/s/loving-dawn-e0ey7?file=/src/App.tsx:24-429 按电子邮件上的标签触发自动填充

推荐阅读