官方文档 可参照本地文档

一、事件绑定

1. 事件的名称都是React的提供的，因此名称的首字母必须大写onClick、onMouseOver
   

2. 为事件提供的处理函数，必须是如下格式
   

   <button onClick={ function }>按钮</button>

3. 事件绑定方式 ```javascript

   1.方式1：普通函数绑定

   按钮

// 事件的处理函数，需要定义为 一个箭头函数，然后赋值给 函数名称 function show(){ console.log(“show方法”) console.log(this) //undefined }

2.方式2：箭头函数绑定(此种方式用的比较多)

// 事件的处理函数，需要定义为 一个箭头函数，然后赋值给函数名称 show = (arg1) => { console.log(‘show方法’ + arg1) console.log(this) //当前组件对象 }

注意点：<br />1.在react中，箭头函数中的this就代表当前的组件对象，因为箭头函数的this其实质是定义函数时所在作用域中的this。<br />2.在react中，普通函数中的this是undefined。
<a name="VgIKv"></a>
## 二、修改事件的this并传递参数
<a name="9JNpW"></a>
#### 方式1：使用bind修改普通函数中的this指向
```javascript
import React, {Component} from 'react'
class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }
    handleClick (name, e) {
        console.log(this.state.message + name)
    }
    render () {
        return (
            <div>
                <button onClick={ this.handleClick.bind(this, '赵四') }>Say Hello</button>
            </div>
        )
    }
}

方式2: 在构造函数中通过bind修改this指向，返回新函数，然后在render中使用修改this指向后的新函数

import React, {Component} from 'react'
class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick (e) {
        console.log(this.state.message)
    }
    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

方式3：使用箭头函数

class Test extends React.Component {
    constructor (props) {
        super(props)
        this.state = {message: 'Allo!'}
    }
    handleClick = (e) => {
        console.log(this.state.message)
    }
    render () {
        return (
            <div>
                <button onClick={ this.handleClick }>Say Hello</button>
            </div>
        )
    }
}

注意：

第二种和第三种方式如果这样用，Say Hello ，此时会直接调用handleClick函数。如果想要点击按钮的时候才触发handleClick方法并且要给this.handleClick函数中传递参数，可以使用箭头函数{this.handleClick(‘aa’,’bb’)} }>Say Hello。但一旦使用了箭头函数，那么箭头函数中的this就已经指向了当前的组件对象

三、绑定文本框与state中的值

参考本地文档

1. 在Vue中提供了v-model指令，可以很方便的实现 数据的双向绑定；
   
2. 但是在React中只是单向数据流，也就是只能把state上的数据绑定到页面，无法把页面中数据的变化自动同步回 state ； 如果需要把页面上数据的变化保存到 state，则需要程序员手动监听onChange事件，拿到最新的数据，手动调用this.setState({ }) 更改回去。 这种方式叫受控组件

   3-1 受控组件

• 受控组件又称为智能组件，顾名思义受控组件就是受到控制的组件，受控组件是数据的所有者，它拥有数据、且拥有操作数据的action。它可以使用自己的state数据，也可以将数据和操作action传递给子组件，让子组件来完成UI或者功能。
• 比如在表单的input中，我们给input的value值为state.inputValue时，当用户对input进行操作时，没有对inputValue进行setState()操作，这个值不变，也就意味着input显示不变。
• 但是如果我们给input一个事件，在事件中进行对state的修改。每当用户输入时，input触发onChange事件，调用inputChange函数修改了value值。使用受控组件，每个状态的改变都有一个与之相关的处理函数。好处是可以直接修改或验证用户输入。 ```javascript //如果文本框没有指定onChange事件，那么该文本框是只读的，不可以修改 render() { return (

    <input value="this.state.value" onChange={this.inputChange}/>

  ) }

inputChange = e => this.setState({value: e.target.value})

<a name="e0CcS"></a>
### 3-2 非受控组件
函数组件又称为“无状态组件”，“非受控组件”或“木偶组件”。非受控组件不同于受控组件，它自身并不能拥有可改变的数据。因为函数组件只负责接收 props 并返回 UI，在真实的 React 应用开发场景下，我们经常尽可能的使用函数组件，将整个应用的 UI 拆分成尽可能小的视觉单元。
```javascript
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    alert('A name was submitted: ' +this.refs.mytxt.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref="mytxt" />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Tip:

• 和 Vue 中差不多，Vue 为页面上的元素提供了 ref 的属性，如果想要获取元素引用，则需要使用this.$refs.name
• 在 React 中也有 ref， 如果要获取元素的引用this.refs.引用名称

3-3 React.createRef的使用

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // 创造一个 textInput DOM 元素的 ref
    this.textInput = React.createRef();
  }
  render() {
  // 使用 `ref` 回调函数以在实例的一个变量中存储文本输入 DOM 元素
  //（比如，this.textInput）。
    return (
      <input
        type="text"
        ref={this.textInput}
      />
    );
  }
   // 使用原始的 DOM API 显式地聚焦在 text input 上
   // 注意：我们通过访问 “current” 来获得 DOM 节点
   this.textInput.current.focus();
}

3-4 ref回调

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

3-5 ref转发

Ref 转发是一个可选特性，其允许某些组件接收 ref，并将其向下传递（换句话说，“转发”它）给子组件。

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));
// 你可以直接获取 DOM button 的 ref：
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

3-6 综合所述

以下是对上述示例发生情况的逐步解释：

1. 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
2. 我们通过指定 ref 为 JSX 属性，将其向下传递给 。
3. React 传递 ref 给 fowardRef 内函数 (props, ref) => …，作为其第二个参数。
4. 我们向下转发该 ref 参数到 ，将其指定为 JSX 属性。
5. 当 ref 挂载完成，ref.current 将指向 DOM 节点。