React 爬坑—key的关键之处
发布时间:2020-12-15 07:12:06 所属栏目:百科 来源:网络整理
导读:React 爬坑之旅 场景 根据布尔值显示不同的页面,有相同的操作 // demo handleChangeDemo1 (e) { let name = e.target.value; this.setState({name}) } handleChangeDemo2 (e) { let name = e.target.value; this.setState({name}) } handleClickDemo1 () {
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> } 如果按照上面的代码书写会出现下面的状况
解决方式是添加主键
{ 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> }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |