zoukankan      html  css  js  c++  java
  • React 非嵌套组件event传值

    event.js (单例)

    import {EventEmitter }  from 'events';
    export default new EventEmitter();
    
    

    app.js

    import React, {Component} from 'react';
    
    import emitter  from './components/event'
    class ListItem extends Component {
        constructor(props){
            super(props);
        }
        render(){
            return (
                <li>
                    <input type="checkbox" checked={this.props.checked}   onChange={this.props.onChange} />
                    <span>{this.props.value}</span>
                </li>
            )
        }
    }
    ListItem.defaultProps = {
        checked:false
    }
    
    
    class List extends Component {
        constructor(props){
            super(props);
            this.state = {
                list: this.props.list.map(entry => ({
                    text:entry.text,
                    checked:entry.checked || false
                }))
            }
        }
    
        onItemChange(entry){
            const {list} = this.state;
            this.setState({
                list: list.map(pre => ({
                    text: pre.text,
              
                    checked:pre.text === entry.text ? !pre.checked : pre.checked
                }))
            },()=>{
                emitter.emit('ItemChange',{...entry,checked:!entry.checked})
            })
    
           
        }
    
        render(){
            return (
                <div>
                    <ul>
                        {this.state.list.map((entry,index)=>(
                            <ListItem key={`list-${index}`}  value={entry.text} checked={entry.checked}  onChange={this.onItemChange.bind(this,entry)} />
                        ))}
                    </ul>
                </div>
            )
        }
    }
    
    export  default  class App extends Component{
        state = {
            list:[{text:'apple'},{text:'orange'}]
        }
        componentDidMount(){
            this.itemChange = emitter.addListener("ItemChange",(msg,data) => {
                console.log(data, msg)
    
            })
        }
        componentWillUnmount(){
            emitter.removeListener(this.itemChange)
        }
    
        render(){
            return (
                <List  list={this.state.list}/>
            )
        }
    }
    
  • 相关阅读:
    Windows Form -----内容(3)
    Windows Form -----内容(2)
    Windows Form -----内容(1)
    C#与数据库链接---小练3--插入语句的验证
    C#与数据库链接---小练2--查询
    连接数据库--小练---简单增删改
    SQL简短汇总
    面向对象---4
    面向对象--3
    面向对象----类2
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/12605801.html
Copyright © 2011-2022 走看看