React 爬坑之旅
场景
// demo handleChangeDemo1 (e) { let name = e.target.value; this.setState({name}) } handleChangeDemo2 (e) { let name = e.target.value; this.setState({name}) } handleClickDemo1 () { this.setState({flag: !this.state.flag}) } handleClickDemo2 () { this.setState({flag: !this.state.flag}) }
{ flag ? <div> <input type="text" placeholder='用户名' onChange={this.handleChangeDemo1.bind(this)}/> <button onClick={this.handleClickDemo1.bind(this)}>下级页面</button> </div> : <div> <input type="text" placeholder='看着写' onChange={this.handleChangeDemo2.bind(this)}/> <button onClick={this.handleClickDemo2.bind(this)}>上级页面</button> </div> }
如果按照上面的代码书写会出现下面的状况
数据被通用了,因为react无法区分更新
解决方式是添加主键
key
{ flag ? <div> <input type="text" id='username' placeholder='请输入用户名' key={1} onChange={this.handleChangeDemo1.bind(this)}/> <button onClick={this.handleClickDemo1.bind(this)}>下级页面</button> </div> : <div> <input type="text" placeholder='看着写' key={2} onChange={this.handleChangeDemo2.bind(this)}/> <button onClick={this.handleClickDemo2.bind(this)}>上级页面</button> </div> }
原文地址:https://www.jb51.cc/react/303494.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。