ReactJS - 有没有办法通过按 <input/> 中的“Enter”键来触发方法？

Posted 2023-02-22

【中文标题】ReactJS - 有没有办法通过按 <input/> 中的“Enter”键来触发方法？

【英文标题】：ReactJS - Is there a way to trigger a method by pressing the 'Enter' key inside <input/>?

【发布时间】：2017-01-19 10:12:25

【问题描述】：

仅使用 onChange 和 value 并专注于 <input/>，最好不使用 jQuery，有没有办法通过按“Enter”键来触发方法？因为，只希望用户按“Enter”键以更新name 字符串状态。

代码如下：

  constructor(props) 
    super(props);

    this.state = 
      name: '',
    
  

  textChange(event) 
    this.setState(
      name: event.target.value,
    )
  

  //Would like to trigger this once 'Enter' key is pressed while focused inside `<input/>`
  enterPressed() 
    var name = this.state.name;
  

  render() 
    return (
        <input
          placeholder='Enter name'
          onChange=this.textChange.bind(this)
          value=this.state.name
        />
    )
  

【参考方案1】：

你可以做的是像这样使用 React 的关键事件：

<input
    placeholder='Enter name'
    onChange=this.textChange.bind(this)
    value=this.state.name 
    onKeyPress=this.enterPressed.bind(this)
/>

现在，要检测回车键，请将enterPressed 函数更改为：

enterPressed(event) 
    var code = event.keyCode || event.which;
    if(code === 13)  //13 is the enter keycode
        //Do stuff in here
     

所以它的作用是为输入元素添加一个事件监听器。见React's Keyboard Events。然后函数enterPressed在event上触发，现在enterPressed检测到key code，如果是13，做一些事情。

这是一个 fiddle 演示活动。

---

注意：onKeyPress 和 onKeyDown 事件会在用户按下时立即触发。您可以使用onKeyUp 来解决这个问题。

【讨论】：

event.keyCode 做什么 || event.which 做什么？

@LyManeug 实际上，它取决于浏览器，请参阅here。如果浏览器不支持keyCode 或which，这是一件好事。 || 只是根据其他选项是否为空或未定义/不受支持来选择一个选项，基本上是一个后备。

澄清一下，是否应该使用onKeyUp up 而不是onKeyPress？对哪一个是正确的实施感到困惑。

感谢您的澄清，但您说的返回是什么意思？

@LyManeug 我的意思是停止互动。基本上按下回车键就按下去，抬起键就按下去

【参考方案2】：

使用 onKeyPress 和结果事件对象的 key 属性，这是 React 为您标准化的跨浏览器：

<meta charset="UTF-8">
<script src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<div id="app"></div>
<script type="text/babel">

var App = React.createClass(
  getInitialState() 
    return 
      name: ''
    
  ,
  handleChange(e) 
    this.setState(name: e.target.value)
  ,
  handleKeyPress(e) 
    if (e.key === 'Enter') 
      alert('Enter pressed')
    
  ,
  render() 
    return <input
      placeholder='Enter name'
      onChange=this.handleChange
      onKeyPress=this.handleKeyPress
      value=this.state.name
    />
  
)

ReactDOM.render(<App/>, document.querySelector('#app'))

</script>

【讨论】：

如果我想将 a 按钮链接到与 handleKeyPress(e) 相同的方法，我将如何确定按钮是否触发它。例如，想做if(e.key === 'Enter' || //button triggered it)之类的事情吗？

您能否为您尝试创建的 UI 提供 render() 的示例？最简单的方法是为按钮设置一个单独的onClick 并调用另一个方法，并让文本输入的onKeyPress 在按下Enter 时也调用这个其他方法。

【参考方案3】：

您可以在输入中添加 onKeyPress 并使其等于您要执行的功能。您只需要确保按下的键是使用作为参数传递给函数的事件的回车键

很遗憾不能单独使用onchange方法得到这个结果

【讨论】：

抱歉，在我接受答案并投票之前，您能否举个例子，特别是如何确定按下的键是否是回车键？

【参考方案4】：

你只需像这样触发一个函数，

<input type="text"
 onKeyPress=(event) => 
    var key = event.keyCode || event.which;
    if (key === 13) 
        // perform your Logic on "enter" button 
        console.log("Enter Button has been clicked")
    

/>;