React 事件处理

事件机制

事件 是前端一个非常重要的特性，React 也当然具备良好的事件处理机制，结合事件，我们在理解一遍 State 属性。

class Index extends Component {
  constructor() {
    super()
    // 初始化数据
    this.state = {
      num: 1
    }
 }

  // 事件函数
  changeNum(n) {
    this.setState({num: n})
  }

  render() {
    return <div onClick={this.changeNum.bind(this, 2)}>{this.state.num}</div> // 点击执行 changeNum | bind 的方法是拥有绑定参数，其中第一个参数是 this
  }
}

组件事件

React 的事件，通过与 Props属性 的结合，还能跨越组件。

// index.js
class Index extends Component {
  constructor() {
    super()
    this.state = {text: 'init'}
  }

  changeText(e) {
  /*
    e 是事件对象，包含了一些关于当前事件的信息集合
    e.target.value 可以拿到 input 改变后的值
  */
  this.setState({text: e.target.value})
 }

  render() {
    return (
      <div>
        {/* 事件函数通过 props 属性，传递到了 Header 组件，然后在 Header 组件中触发 */}
        <Header text={this.changeText.bind(this)} />
        <h1>{this.state.text}</h1>
      </div>
    )
  }
}

// header.js
class Header extends Component {
  render() {
    return <input type="text" onChange={this.props.text} />
  }
}