栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

举例说明如何在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'));
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/373119.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号