在事件觸發時沒有調用回調函數

我在ReactJS中學習Flux。我已經使用Flux模式在ReactJS中編寫了一個簡單的代碼。在此代碼中正在顯示一些記錄，並且有一個選項可以添加新記錄。問題是，當我觸發一個事件時，即當我單擊添加按鈕時，從this.on(CHANGE_EVENT, callback);沒有調用回調函數，因此新屏幕沒有顯示在屏幕上。因此請告訴，爲什麼這個callback函數沒有被調用？以及如何解決這個問題？在事件觸發時沒有調用回調函數

Store.js

import React from 'react'; 
import Dispatcher from './Dispatcher.js'; 
import { EventEmitter } from "events"; 

class Store extends EventEmitter { 

    constructor() { 
     super(); 
     this.records = [ 
      { 
       id: 1, 
       name: 'First Record' 
      }, 
      { 
       id: 2, 
       name: 'Second Record' 
      }, 
      { 
       id: 3, 
       name: 'Third Record' 
      }, 
      { 
       id: 4, 
       name: 'Fourth Record' 
      }, 
      { 
       id: 5, 
       name: 'Fifth Record' 
      } 
     ] 
    }; 

    createRecord(name, id) { 
     this.records.push({ 
      id: id, 
      name: name 
     }); 
     this.emit("change"); 
    } 

    addChangeListener(CHANGE_EVENT, callback) { 
     this.on(CHANGE_EVENT, callback); 
    } 

    handleActions(action) { 
     switch(action.type) { 
      case "ADD_RECORD": { 
       this.createRecord(action.name, action.id); 
       break; 
      } 
     } 
    } 

    getRecords() { 
     return this.records; 
    } 
}; 

const recordsStore = new Store(); 
Dispatcher.register(recordsStore.handleActions.bind(recordsStore)); 

export default Store;

View.jsx

import React from 'react'; 
import Store from './Store.js'; 
import {addRecord} from "./Action.js"; 


class View extends React.Component { 
    constructor() { 
     super(); 
     this.Store = new Store(); 
     this.state = {records: this.Store.getRecords()}; 
    } 

    render() { 
     return (
      <div className="container" style={{marginTop:'25px'}}> 
       <ul className="list-group"> 
        <li style={{backgroundColor:'#696969', color:'#f5f5f5', textAlign:'center', padding:'5px', fontSize:'16px', borderRadius:'5px 5px 0px 0px'}}><b>Records</b></li> 
        {this.state.records.map((eachRecord,index) => 
         <ListItem key={index} singleRecord={eachRecord} /> 
        )} 
       </ul> 
       <input type="text" ref="input"/> 
       <button onClick={()=>addRecord(this.refs.input.value)}>Add</button> 
      </div> 
     ); 
    } 

    componentWillMount() { 
     this.Store.addChangeListener("change", this.updateStore); 
    } 

    updateStore() { 
     this.setState({ 
      records: this.Store.getRecords() 
     }); 
    } 
} 

class ListItem extends React.Component { 
    render() { 
     return (
      <li className="list-group-item" style={{cursor:'pointer'}}> 
       <b>{this.props.singleRecord.name}</b> 
       <button style={{float:'right'}}>Delete</button> 
      </li> 
     ); 
    } 
} 

export default View;

來源

2017-10-06 Agha

這是我怎麼會建立一個流量店 - 的關鍵點是：

註冊調度回調構造函數
它使單個CHANGE_EVENT不變並更容易隱藏在店內。
通常你會希望你的商店只有一個實例。所以當你輸出它時你會export default new Store()。這樣所有組件都可以使用同一家商店。

商店

const CHANGE_EVENT = 'change'; 

class Store extends EventEmitter { 
    constructor() { 
    super(); 
    Dispatcher.register(this.handleActions.bind(this)); 
    } 

    createRecord(name, id) { 
    // code.. 
    this.emitChange(); 
    } 

    emitChange() { 
    this.emit(CHANGE_EVENT); 
    } 

    addChangeListener(callback) { 
    this.on(CHANGE_EVENT, callback); 
    } 

    removeChangeListener(callback) { 
    this.removeListener(CHANGE_EVENT, callback); 
    } 

    handleActions(action) { 
    switch (action.type) { 
     case 'ADD_RECORD': { 
     this.createRecord(action.name, action.id); 
     break; 
     } 
    } 
    } 

    getRecords() { 
    return this.records; 
    } 
} 

export default new Store();

在視圖中，我們應該綁定你的聽衆componentDidMount，記得刪除componentWillUnmount聽衆。

查看

import Store from './Store'; 

class View extends React.Component { 
    constructor() { 
    super(); 
    this.state = {records: Store.getRecords()}; 
    } 

    render() { 
    // code.. 
    } 

    componentDidMount() { 
    Store.addChangeListener(this.updateStore); 
    } 

    componentWillUnmount() { 
    Store.removeChangeListener(this.updateStore); 
    } 

    // use this syntax to keep context or use .bind in the constructor 
    updateStore =() => { 
    this.setState({ 
     records: Store.getRecords() 
    }); 
    } 
}

來源

2017-10-06 06:59:10

在事件觸發時沒有調用回調函數

回答

相關問題