react-自定义事件

react

没有嵌套关系的组件(如兄弟组件)之间的通信,只能通过自定义事件的方式来进行。

var EventEmitter = require('events').EventEmitter;

import React,{Component} from 'react';

import ReactDOM from 'react-dom';

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')

);

注意:在 componentDidMount中注册事件,在componentWillUnmount中取消事件注册。

Node.js 中的EventEmitter

以上是 react-自定义事件 的全部内容, 来源链接: utcz.com/z/381747.html

回到顶部