Каждый экземпляр принимает события при рендеринге компонента ES6 React/Reflux дважды

Question

У меня есть компонент (который выполняет ввод текста), отображаемый дважды внутри другого.

Когда я ударил ключ в одном из компонентов ввода текста, каждый уведомлен ...

компонент принимает строку времени, как "14:30", и должен позволять час & входа минутных частей.

рефлюкса действия:

let TimeActions = Reflux.createActions([ 
    'setHour', 
    'setMinute' 
]); 

рефлюкс Смешение:

let TimeMixin = { 
    init: function() { 
    this.listenToMany(TimeActions); 
    }, 

    onSetHour(h) { 
    this.time.hour = h; 
    this.trigger(this.time); 
    }, 

    onSetMinute(m) { 
    this.time.minute = m; 
    this.trigger(this.time); 
    } 
}; 

Реагировать компонент:

export default class TimePicker extends React.Component { 

    constructor(props) { 
    super(props); 

    let parts = this.props.time.split(':'), 
     time = { 
     hour: parts[0], 
     minute: parts[1] 
    }; 

    this.store = Reflux.createStore({ 
     mixins: [ TimeMixin ], 
     time: time 
    }); 

    this.state = time; 
    } 

    componentDidMount() { 
    this.unsubscribe = this.store.listen(this.onTimeChanged.bind(this)); 
    } 
    componentWillUnmount() { 
    this.unsubscribe(); 
    } 

    onTimeChanged(time) { 
console.log('TIME SET TO', time); 
    this.setState(time); 
    } 

    render() { 
    let classes = classNames('time-picker'); 

    return (
     <div className={classes}> 
     <table> 
      <tbody> 
      <tr> 
       <td> 
       <input type="text" className="hour" maxLength="2" 
         value={this.state.hour} 
         onChange={this.onHourChanged} /> 
       </td> 
       <td class="separator">:</td> 
       <td> 
       <input type="text" className="minute" maxLength="2" 
         value={this.state.minute} 
         onChange={this.onMinuteChanged} /> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    ); 
    } 

    onHourChanged(event) { 
    TimeActions.setHour($(this.getDOMNode()).val()); 
    } 

    onMinuteChanged(event) { 
    TimeActions.setMinute($(this.getDOMNode()).val()); 
    } 
} 

Я визуализации TimePicker дважды от другого Реагировать компонента ...

... 
<TimePicker time={this.props.from} /> 
<TimePicker time={this.props.to} /> 
... 

... и при вводе "01" внутри входа в минуте любого из случаев, я получаю следующий журнал:

TIME SET TO Object {hour: "08", minute: "01"} 
TIME SET TO Object {hour: "12", minute: "01"} 

Любую идею, что я делаю неправильно?

Answer 1

Это связано с тем, что вы создаете два магазина на уровне конструктора вашего компонента.

Вы должны создать хранилище вне компонента, поэтому только один будет существовать независимо от того, есть ли у вас один или миллионный экземпляр вашего компонента.