[react] 举例说明如何在React创建一个事件

[react] 举例说明如何在React创建一个事件

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var EventEmitter = require('events').EventEmitter;
let emitter = new EventEmitter();

class ListItem extends Component {
  static defaultProps = {
    checked: false
  };
  constructor(props) {
    super(props);
  }
  render () {
    return (
      <li>
        <input type="checkbox" checked={this.props.checked} onChange={this.props.onChange} />
        <span>{this.props.value}</span>
      </li>
    );
  }
}

class List extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: this.props.list.map(entry => ({
        text: entry.text,
        checked: entry.checked || false
      }))
    };
    console.log(this.state);
  }

  onItemChange (entry) {
    const { list } = this.state;
    this.setState({
      list: list.map(prevEntry => ({
        text: prevEntry.text,
        checked: prevEntry.text === entry.text ? !prevEntry.checked : prevEntry.checked
      }))
    });
    //这里触发事件
    emitter.emit('ItemChange', entry);
  }
  render () {
    return (
      <div>
        <ul>
          {this.state.list.map((entry, index) => {
            return (
              <ListItem
                key={`list - ${index}`}
                value={entry.text}
                checked={entry.checked}
                onChange={this.onItemChange.bind(this, entry)} />
            );
          })}
        </ul>
      </div>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount () {
    this.itemChange = emitter.addListener('ItemChange', (msg, data) => console.log(msg));//注册事件
  }
  componentWillUnmount () {
    emitter.removeListener(this.itemChange);//取消事件
  }
  render () {
    return (
      <List list={[{ text: 1 }, { text: 2 }]} />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

  个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题