React 爬坑—key的关键之处

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