React -- 事件

React – 事件

绑定事件

采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写onclick, React里的事件是驼峰onClick，React的事件并不是原生事件，而是合成事件。

1. 写法一共四种，我们推荐有两种

   1. 箭头函数

      class App extends React.component{
        change = () => {}
      }
   

   2. 在constructor函数中bind this

     class App extends React.component{
       constructor () {
         super()
   
         this.change = this.change.bind( this )
       }
       change () {
         this.setStatge({})
       }
     }
   

2. 事件对象 (event)

   • React中的事件对象不是浏览器提供的， 而是内部自己构建的
   • React的事件对象的中除了方法以外，其他值都是null，但是使用方式和浏览器中事件对象一致，也可以直接使用

3. 事件参数

   1. 形式参数
   2. 实际参数

注意：
1. React中如果直接在实例方法后面跟（） ， 那么实例方法就会自动运行
2. 实际参数的传递需要使用bind 绑定
<div> { this.change.bind( this, arg1, arg2 ) } </div>

• 在render里调用方法的地方外面包一层箭头函数
• 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
• 通过event传递
• 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用

处理用户输入

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
  constructor() {
    super()
    this.state = {
      xing: '',
      ming: ''
    }
  }
  handleInputChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }
  render () {
    const {
      xing,
      ming
    } = this.state
    return (
  		<div>
        <label>
          <span>姓:</span>
          <input
            type="text"
            name="xing"
            value={xing}
            onChange={this.handleInputChange}
          />
        </label>
        <label>
          <span>名:</span>
          <input
            type="text"
            name="ming"
            value={ming}
            onChange={this.handleInputChange}
          />
        </label>
        <p>欢迎您: {xing}{ming}</p>
      </div>
  	)
  }
}
ReactDOM.render(
	<App/>,
  document.getElementById('root')
)