javascript - 如何在 React.js 中触发按键事件

Question

我是 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);

Answer 1

如果您创建对 div 的引用，则可以在其上触发事件。有了钩子(Hook)，你可以使用 useRef .没有钩子(Hook)，你可以使用 createRef .

带钩子(Hook):

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"
    />
  );
}

没有钩子(Hook):

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'}));