如何使用 map 将数据从组件传递到 reactJs 上的另一个组件？

Question

我有一个react-big-calendar，我希望当我点击新事件时，小时的对话框将具有点击新事件的小时值，例如，我从 07:30 到08:30，所以我想在我的对话框中将这一小时作为start 和end 状态的输入值，但是，我通过单击他的位置的按钮“Ajouter disponibilité”来获得相同的对话框在日历的上方，当我单击它时，我将获得当前的时间，并且在这两个位置我都可以使用时钟来更改它。

我的代码沙箱是：

https://codesandbox.io/s/9llpm579py

当我运行它时，我得到相同的值是他们两个的时刻。

我该如何解决？

Answer 1

https://codesandbox.io/s/8xl25y616j

因为您将这些文本字段的所需格式作为参数传递给handleAjouter = (start, end)，所以您可以将它们绑定到您的第一个元素的开始和结束。您可以像以前一样使用 moment，但似乎没有必要。

handleAjouter = (start, end) => {
    this.state.tranches[0].start = start;
    this.state.tranches[0].end = end;
    this.setState({
      start: moment(start).format("HH:mm"),
      end: moment(end).format("HH:mm"),
      clickDisponibilite: true,
      tranches: this.state.tranches,
      openPopupAjout: true
    });
  };

因为您的初始元素，虽然它从 start 和 end 获取初始值，但它的值在 tranches[0] 内。

所以现在它会在https://gyazo.com/d0f887a0fa3d4dfeff56919a7cf94b28 中提取这些值