如何在ReactJS的onKeyPress事件中检测'Shift + Enter'？

Question

如何在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'));

- Jacob Goh

Answer 1

您的答案检测的是“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'));

- Pranesh Ravi

---

嗯...这不是一样的吗？ - Jacob Goh

不是这样的。如果你只按“Enter”，你什么也看不到。你需要按“Shift + Enter”。 - Pranesh Ravi

编辑了注释...不小心按下了“Enter”键。 - Pranesh Ravi

哦，那并不重要。这只是为了展示shiftKey可以被检测到。e.shiftKey和e.nativeEvent.shiftKey是同一件事。无论如何，感谢您的帮助。我会将您的答案标记为正确的。 - Jacob Goh

你之前使用的jQuery append应该改用React的方式实现。 - Sayam Qazi