1

別のコンポーネント内で 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"}

私が間違っていることについて何か考えはありますか?

4

1 に答える 1