Javascript ReactJS-是否有方法通过按'；输入'；内键<；输入/>；？

仅使用

onChange

和value，并在

内聚焦，最好不使用jQuery，是否有办法通过按“回车”键触发方法？因为，只希望用户按“回车”键来更新

名称

字符串状态

代码如下：

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

构造函数（道具）{
超级（道具）；
此.state={
名称：“”，
}
}
文本更改（事件）{
这是我的国家({
名称：event.target.value，
})
}
//想在内部聚焦时按下“回车”键后触发此操作吗``
enterPressed（）{
var name=this.state.name；
}
render（）{
返回(
)
}

您可以在输入中添加一个onKeyPress，使其与您想要执行的功能相等。您只需要使用传递给函数的事件作为参数，确保按下的键是enter键

---

不幸的是，不能仅使用onchange方法来获得此结果

您可以使用React的关键事件，如下所示：

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

这样做的目的是向输入元素添加一个事件侦听器。看见然后，事件触发功能

enterPressed

，现在

enterPressed

检测按键代码，如果是13，则执行一些操作

下面是一个演示该事件的示例

---

---

注意：用户按下时，

onKeyPress

和

onkeypdown

事件会立即触发。您可以使用

onKeyUp

来解决此问题

使用

onKeyPress

和生成的事件对象的

key

属性，该属性通过以下方式在跨浏览器中正常化：

var App=React.createClass({
getInitialState（）{
返回{
名称：“”
}
},
手变（e）{
this.setState（{name:e.target.value}）
},
手动按键（e）{
如果（e.key=='Enter'）{
警报（“按Enter键”）
}
},
render（）{
返回
}
})
ReactDOM.render（，document.querySelector（'#app'））

您只需启动这样一个函数

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

{
var key=event.keyCode | | event.which；
如果（键===13）{
//在“回车”按钮上执行逻辑
console.log（“已单击输入按钮”）
}
}}
/>;

对不起，在我接受答案并投票之前，您能举个例子，特别是如何确定按下的键是否是回车键？What do event.keyCode | event.which do？@LyManeug实际上，它依赖于浏览器，请参阅。如果浏览器不支持

keyCode

或

which

，这是一件好事

| |

只是根据其他选项是否为空或未定义/不支持来选择一个选项，基本上是一个回退。只是为了澄清，是否应该使用

onKeyPress

而不是

onKeyPress

？困惑于哪一个是正确的实施方式。谢谢你的澄清，但你所说的回头是什么意思？@LyManeug我的意思是停止互动。基本上，按下enter键后，向下按go键，当他们抬起钥匙时，向上按。如果我想将a按钮链接到与handleKeyPress（e）相同的方法，我将如何确定按钮是否触发了它。例如，如果（e.key=='Enter'| |//按钮触发了它），是否要执行类似于

的操作
？能否为您尝试创建的UI提供
render（）
的示例？最简单的方法是为按钮单独单击一个
onClick
，然后调用另一个方法，当按下
Enter
时，文本输入的
onKeyPress
也调用另一个方法。
<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")
    }
}}
/>;