[react] 舉例說明如何在React創(chuàng)建一個(gè)事件

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}))});//這里觸發(fā)事件emitter.emit('ItemChange', entry);}render () {return (<div><ul>{this.state.list.map((entry, index) => {return (<ListItemkey={`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') );

??個(gè)人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅(jiān)持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關(guān)前端面試題

總結(jié)

以上是生活随笔為你收集整理的[react] 举例说明如何在React创建一个事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。