R_基础_3

1 绑定事件

---------------------------------- 1 说明 ------------------------------------------

  1 所有事件, 都以 on开头 (包括自定义事件)  // onClick / onAbc

  2 类组件: this.xx 访问事件 / hh = () => {} 定义事件

  3 函数式组件: xx 访问事件 / const hh = () => {} 定义事件

  4 阻止默认事件等方式 --> 也是通过事件对象, 调用原生的 API 来处理

  5 函数式组件中的, 方法可以定义在外部, 但是无法使用 props



---------------------------------- 2 ES5 事件方法 ------------------------------------------

  a1(e) {}   // 默认形参 = 事件对象
  <button onClick={this.a1.bind(this)}>  测试 1 </button>   // 需要习惯性的改变 this 指向

  a2(a, b, c) {}   // 默认最后一个参数 c, 为事件对象
  <button onClick={this.a2.bind(this, 1, 2)}>  测试 2 </button>   // 若传递3个实参, 最后一个是无效的

  h1() {}   
  <button onClick={()=>this.h1()}>  测试 1 </button>   // 解决 this 指向的又一种方式

  h2(e) {}
  <button onClick={(e)=>this.h2(e)}>  测试 2 </button>   // 没有默认事件对象, 需要这么传

  h3(e, a, b) {}
  <button onClick={(e)=>this.hh3(e, 1, 2)}>  测试 3 </button>   // 传参方式

  <button onClick={ (e)=>{console.log(e)} }> 测试 1 </button>   // 直接绑定业务方法 (不推介)




---------------------------------- 3 ES6 事件方法 (推介) ------------------------------------------

  k1 = () => {}
  <button onClick={this.k1}>  测试 1 </button>   // 函数式组件无需 this

  k2 = e => {}
  <button onClick={this.k2}>  测试 2 </button>   // 存在默认事件对象

  k3 = (e, a, b) => {}  // 1 2 event;  实参 3 是无效的
  <button onClick={this.k3.bind(this, 1, 2, 3)}>  测试 2 </button>   // 同样是最后一个为默认事件对象

2 表单说明

1 通常把表单分为俩种 --> 受控表单 + 非受控表单


### 受控表单
-------------------------------------------------------------------------------------
  <input type="text" value={this.state.msg}>
  // 将组件数据, 和表单元素的 value值绑定在一起
  // 用户输入数据, 触发setState() 方法修改 state数据, state 的值控制表单元素的值
-------------------------------------------------------------------------------------

### 非受控表单 --> 通过 ref 获取 DOM 或组件 -> 然后使用原生 DOM 方式来获取表单元素值

3 表单处理

1 受控组件 --> 使用步骤  (文本框和文本段落的示例)
----------------------------------------------------------------------------
  1 state = {msg: ''}   // 在 state 中添加一个状态, 作为表单元素的 value 值 (控制表单元素值的来源)
	
  2 <input type="text" value={this.state.msg}>   // 让其作为受控表单的 value 值

  3 <input type="text" value={this.state.msg} onChange={e => this.setState({txt: e.target.value})}>
----------------------------------------------------------------------------


2 受控组件 --> 下拉框 (Demo)
----------------------------------------------------------------------------
  1 state = {msg: 'bj'}

  2 <select value={this.state.msg} onChange={this.fn1}>
      <option value="bj"> 北京 </option>
      <option value="sh"> 上海 </option>
      <option value="gz"> 广州 </option>
    </select>

  3 fn1 = e => {
      this.setState({msg: e.target.value})
    }
----------------------------------------------------------------------------


3 受控组件 --> 复选框 (Demo)
----------------------------------------------------------------------------
  1 state = {isChecked: false}

  2 <input type="checkbox" checked={this.state.isChecked} onChange={this.fn1}>

  3 fn1 = e => {
      this.setState({isChecked: e.target.checked})
    }
----------------------------------------------------------------------------


4 多表单元素优化步骤 ↓
----------------------------------------------------------------------------
  1 给表单元素添加 name 属性, 名称与 state 相同
    <input value={this.state.msg} onChange={this.fn1} name="msg">
    
  2 根据表单元素类型获取对应的值
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value

  3 根据 name 设置对应 state
    this.setState({
      [name]: value
    })

  4 定义方法   // 然后把表单的事件处理程序, 都该为这个
    hh = e => {
      const target = e.target
      const value = target.type === 'checkbox' ? target.checked : target.value
      const name = target.name
    }
----------------------------------------------------------------------------


5 非受控组件 --> 使用步骤   // 常用于文件上传
----------------------------------------------------------------------------
  1 调用 React.createRef() 方法创建一个 ref 对象
	constructor() {
	  super()
	  this.txtRef = React.createRef()
	}

  2 将创建好的 ref 对象添加到文本框中   // 也就是把 ref 对象和表单关联起来
    <input type="text" ref={this.txtRef}>   // 然后就可以用这个 txtRef 对象表示这个当前的 DOM 对象了

  3 通过 ref 对象就可, 获取到当前文本框的值了
    this.txtRef.current.value   // 
----------------------------------------------------------------------------