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的引用，则可以在其上触发事件。带有钩子，您可以使用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'}));

Answer 2

基本上，应该像这样处理onKeydown。希望这会有所帮助。

class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = { value: 'hi' }
    }

    onKeyPress = event => {
        if (event.key === 'Enter') {
            this.setState({ value: event.target.value })
        }
    }

    render() {

        return (
            <div>
                <input type="text" onKeyPress={this.onKeyPress} placeholder='press Enter'/>  
                <h1>Value: {this.state.value}</h1>
            </div>
        );
    }
}
export default App;

Working Demo

Answer 3

如果您要创建键盘事件，则可以使用KeyboradEvent构造函数。

可以按以下方式调度回车键事件：

const event = new KeyboardEvent('keypress', {
  key: 'enter',
});
console.log(event) // KeyboardEvent {isTrusted: false, key: "enter", code: "", location: 0, ctrlKey: false, …}

仅供参考：react-keydown软件包非常适合用于实现键盘导航或其他快捷方式。

Answer 4

Test util Simulate旨在在单元测试期间触发事件。

如何在React.js中触发keypress事件

4 个答案: