04-表单详解（一）——input、select和textarea处理方式一样& radio & checkbox & 非受控组件-类似于Vue中ref-实际上就是直接操作DOM

表单详解——input、select和textarea处理方式一样& radio & checkbox & 非受控组件-类似于Vue中ref-实际上就是直接操作DOM

• 不同的表单项数据处理（受控组件）

  • input、select和textarea处理方式一样

• radio

  <label htmlFor="male">男</label>
  <input checked={this.state.gender==='male'?true: false} value='male' onChange={this.handleGender} name='gender' type="radio" id="male"/>
  <label htmlFor="male">女</label>
  <input checked={this.state.gender==='female'?true: false} value='female' onChange={this.handleGender} name='gender' type="radio" id="female"/>

• checkbox

favourHandle = (e) => {
  // 处理checkbox:原来已经存在的值，就删除；原来不存在的值，就添加
let favour = [...this.state.favour];
  let index = favour.findIndex(item=>{
    return item == e.target.value
  })
  if(index == -1) {
    // 原来没有值，就添加
    favour.push(e.target.value);
  }else{
    // 原来有值，就删除
    favour.splice(index, 1);
  }
  // 更新默认值
  this.setState({
    favour: favour
  });
}

<label htmlFor="smoking">吸烟</label>
<input checked={this.state.favour.some(item=>item==='smoking')}  onChange={this.handleFavour} value='smoking' type="checkbox" id="smoking"/>
<label htmlFor="drinking">喝酒</label>
<input checked={this.state.favour.some(item=>item==='drinking')} onChange={this.handleFavour} value='drinking' type="checkbox" id="drinking"/>
<label htmlFor="tangtou">烫头</label>
<input checked={this.state.favour.some(item=>item==='tangtou')}  onChange={this.handleFavour} value='tangtou' type="checkbox" id="tangtou"/>

• 简化表单绑定操作

  handleItem = (e) => {
    this.setState({
      // ES6新特性：对象属性可以是动态值
      [e.target.id]: e.target.value
    })
  }
  

• 非受控组件（类似于Vue中ref，实际上就是直接操作DOM）

  • 通过ref实例对象current属性可以得到原生DOM对象
  • 可以使用defaultValue指定表单的默认值

  // 构造函数
  this.textInput = React.createRef();
  // 标签中
  <input type="text" ref={this.textInput} />
  // 使用（current表示DOM元素）
  this.textInput.current
  

• 文件上传应用

  this.fileRef = React.createRef();
  let fileInfo = this.fileRef.current.files[0];
  <input type="file" id="file" ref={this.fileRef}/>