react.js - React 表单怎么使其回车才修改表单的值？

问题描述

问 题

1、比如有如下可控表单：

<input type="text" value={name}/>

我怎么使其修改值的时候不触发onChange，而是等我按回车或失去焦点的时候才触发onChange呢？

解决方案

onChange 是浏览器自动出发的，不是你能左右的，你应该是想按回车或失去焦点的时候才执行某段函数吧？
你可以这样写：

<input type="text" value={tmp} onChange={this.changeValue} onBlur={this.handler} onKeyup={this.onKeyup}/>
onChange = (e) => {
    this.setState({
        tmp : e.target.value
     })
}
onKeyup = (e) => {
    e.keyCode === 13 && this.handler()
}
handler = () => {
    // 你的逻辑
}

这篇关于react.js - React 表单怎么使其回车才修改表单的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！