[英]Trigger Submit button with Enter Key React
我想按 Enter 键并发送消息。 我试试这个:
但是有一个错误。
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
我想管理我的功能:
handleSendMessage = e => {}
我已经尝试过 OnKeyPressed 但我无法在那里调用我的函数。 谢谢你。
我更喜欢没有 jquery 的解决方案
您将在输入文本输入上添加一个 keyPress 事件,然后使用e.which ===13
检测输入按键
onKeyPress = (e) => {
if(e.which === 13) {
this.handleSendMessage();
}
}
render() {
return (
<div style={styles}>
<input type="text" className="form-control input-sm chat_input" placeholder="Write your message here..."
onChange={this.handleTextChange} onKeyPress={this.onKeyPress} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm" onSubmit={this.handleSendMessage}
/></span>
</div>
);
}
您可以使用form
并更改按钮类型以submit
<form onSubmit={this.handleSendMessage}>
<input type="text" className="form-control input-sm chat_input"
placeholder="Write your message here..."
onChange={this.handleTextChange} value={this.state.newMessage}
/>
<span className="input-group-btn">
<input type="submit" value="Send" className="btn btn-primary btn-sm"/>
</span>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.