react学习8-React 事件处理

事件处理

事件绑定方式

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

使用 JSX 语法时需要传入一个函数作为事件处理函数，而不是一个字符串。

// handle为函数名称
<button onClick={this.handleClick}>点击</button>

handleClick = () => {
  // 事件函数中的this是组件的实例对象
  this.setState({
    num: this.state.num + 1
  })
}

阻止默认行为

不能使用return false的方式阻止默认行为，必须使用e.preventDefault()

function ActionLink() {
  function handle(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }
  return (
    <a href="#" onClick={handle}>跳转</a>
  );
}

React的事件对象是合成对象，没有兼容问题

• 调试时调用e.persist()方法，可以查看事件对象中的信息

事件函数中的this问题

• 方法一：可以直接使用箭头函数

handleClick = () => {
  console.log('this is:', this);
}

• 方法二：使用普通函数，但是需要手动绑定this

constructor (props) {
  super(props)
  // 修改函数中默认的this
  // 构造函数中本身this指的是组件的实例对象
  this.handleClick = this.handleClick.bind(this)
}
handleClick () {
  console.log('this is:', this);
}

事件传参

<li onClick={this.handleItem.bind(this, 1, 'apple')} id='1'>apple</li>
<li onClick={(e) => {this.handleItem(2, 'orange', e)}} id='2'>orange</li>

上述两种方式是等价的，分别通过 箭头函数和 Function.prototype.bind 来实现。

在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。

如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

<ul onClick={this.handlePrarent}>
  <li data-id='1'>tom</li>
  <li data-id='2'>jerry</li>
  <li data-id='3'>spike</li>
</ul>

handlePrarent = (e) => {
  // 借助自定义属性获取列表元素的信息
  console.log(e.target.dataset.id)
}

Tab案例

• Tab组件封装
• 事件处理

class MyTab extends React.Component {
  state = {
    currentIndex: 0,
    tabData: [{
      id: 1,
      title: 'apple',
      content: '苹果'
    }, {
      id: 2,
      title: 'orange',
      content: '橘子'
    }, {
      id: 3,
      title: 'lemon',
      content: '柠檬'
    }]
  }

  handleChange = (e) => {
    // 控制Tab的切换操作
    let index = e.target.dataset.index
    this.setState({
      currentIndex: parseInt(index)
    })
  }

  render () {
    const { currentIndex, tabData } = this.state
    const titles = []
    const contents = []
    tabData.forEach((item, index) => {
      // 动态生成标题元素
      titles.push(<li data-index={index} className={currentIndex === index?'active': ''} key={item.id}>{item.title}</li>)
      // 动态生成内容元素
      contents.push(<div className={currentIndex === index?'active': ''}  key={item.id}>{item.content}</div>)
    })
    return (
      <div className="tab">
        <ul onClick={this.handleChange}>
          {titles}
        </ul>
        {contents}
      </div>
    )
  }
}