zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Airtest环境搭建及介绍
    再谈PHP错误与异常处理
    Composer基础
    PHP中this,self,parent的区别
    3种方法轻松处理php开发中emoji表情的问题
    php防注入和XSS攻击通用过滤.
    mysql where in 数组解决小tips
    记录搜索关键字到数据库
    获取用户id的方法
    file_get_contents('php://input') 数据如何转换成数组
  • 原文地址:https://www.cnblogs.com/yaoyinglong/p/7806721.html
Copyright © 2011-2022 走看看