別のコンポーネント内で 2 回レンダリングされるコンポーネント (テキスト入力を実行する) があります。
テキスト入力コンポーネントのいずれかでキーを押すと、それぞれに通知されます...
コンポーネントは のような時間文字列を取り、"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);
}
};
React コンポーネント:
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
別の React コンポーネントから 2 回レンダリングします...
...
<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"}
私が間違っていることについて何か考えはありますか?