javascript - 如何在 ReactJS onKeyPress 事件中检测 'Shift + Enter'?

标签 javascript reactjs keyboard

如何检测 ReactJS onKeyPress 事件中的“Shift + Enter”?

这可能吗?

https://jsfiddle.net/jacobgoh101/cyLqfcts/3/

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  handleKeyPress(e) {
    console.log(e.key);
    $('#app').append("<br/>" + e.key);
  }
  render() {
    return ( < textarea defaultValue = {
        ""
      }
      onKeyPress = {
        this.handleKeyPress
      }
      />
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

最佳答案

您的答案是检测“Enter”而不是“Shift+Enter”。这应该有帮助! https://jsfiddle.net/Pranesh456/c2hzt27g/3/

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }
  handleKeyPress(e) {
    if (e.key === 'Enter' && e.shiftKey) {         
      $('#app').append("<br/> Detected Shift+Enter")
    }
  }
  render() {
    return (
      <textarea 
        defaultValue = {""}
        onKeyUp={this.handleKeyPress}
      />
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

关于javascript - 如何在 ReactJS onKeyPress 事件中检测 'Shift + Enter'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39559071/

相关文章:

javascript - 尝试导入错误: 'path-to-regexp' does not contain a default export (imported as 'pathToRegexp' )

java - 如何将 InputMethodService 与服务连接?

iphone - 用于在自定义 uitableview 单元格中输入的自定义键盘

javascript - 使用 Express 上的 API key + Secret 保护我的 RESTful API

javascript - 单击链接时使用 jQuery/Javascript 更改下拉选项

javascript - 与已编译的 Angular 指令 HTML 交互

javascript - 如何在return()中调用var

javascript - 如何让 useEffect 监听 localStorage 的任何变化?

android - 注入(inject)击键

javascript - 如何从外部 JSON feed 创建 JSONP?