如何在 React.js 中触发按键事件
How to trigger keypress event in React.js
我是React的新手.js。我正在尝试触发文本div 的按键事件。
这是我要为其执行按键触发器的文本框代码。
<div id="test23" contenteditable="true" class="input" placeholder="type a message" data-reactid="137">Hii...</div>
按键方法是:
onKeyPress: function(e) {
return "Enter" == e.key ? "Enter key event triggered" : void 0)
}
我用jQuery尝试过,但我无法触发它。
这是我尝试过的 React 代码,但它不起作用:
var event = new Event('keypress', {
'keyCode' : 13,
'which' : 13,
'key' : 'Enter'
});
var node = document.getElementById('test23');
node.dispatchEvent(event);
如果创建对div 的引用,则可以在其上触发事件。 使用钩子,您可以使用useRef
. 没有钩子,您可以使用createRef
.
带钩子:
function MyComponent() {
const ref = useRef();
// This is simply an example that demonstrates
// how you can dispatch an event on the element.
useEffect(() => {
ref.dispatchEvent(new KeyboardEvent('keypress', {
key: 'Enter',
}));
}, []);
return (
<div
ref={ref}
id="test23"
contentEditable={true}
className="input"
placeholder="type a message"
data-reactid="137"
/>
);
}
不带钩子:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
// This is simply an example that demonstrates
// how you can dispatch an event on the element.
triggerKeyPress() {
this.ref.dispatchEvent(new KeyboardEvent('keypress', {
key: 'Enter',
}));
}
render() {
return (
<div
ref={this.ref}
id="test23"
contentEditable={true}
className="input"
placeholder="type a message"
data-reactid="137"
/>
);
}
}
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
如果您尝试创建键盘事件,则可以使用 KeyboradEvent 构造函数。
可以像这样调度输入键事件:
const event = new KeyboardEvent('keypress', {
key: 'enter',
});
console.log(event) // KeyboardEvent {isTrusted: false, key: "enter", code: "", location: 0, ctrlKey: false, …}
仅供参考:反应键关闭包非常适合实现键盘导航或其他快捷键。
Test util Simulate 旨在在单元测试期间触发事件。
相关文章:
- 为什么我的点击事件没有使用 react js 触发
- React应用程序:道具在下一个事件后更新
- React.js:将事件从父级附加到子级
- 将事件发送到javascript文档的react本机模块是否正确
- 使用react js在跨域上执行事件javascript
- ReactJS:如何使用react正确播放带有onClick事件的html5视频
- 如何在React's onChange事件
- React模板鼠标事件在容器's鼠标事件
- React/flux - 子组件用户事件 - 是否应通过调度程序路由所有内容
- 将 react-redux 与基于事件的第三方库一起使用的最佳方法是什么?
- OnChange 事件使用 React JS 作为下拉列表
- React:如何侦听子组件事件
- 如何在音频元素上使用React媒体合成事件监听器
- React.js事件需要点击2次才能执行
- React-检测'输入'更改事件中的按键
- 测试React中的点击事件是否会更新HTML
- React在状态更改时丢弃排队的事件
- 如何从 React 中的事件对象访问自定义属性
- 为什么removeEventListener不适用于React安装的事件处理程序
- React事件未启动