如何使用地图将数据从组件传递到 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
    });
  };

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

所以现在它在 https://gyazo.com/d0f887a0fa3d4dfeff56919a7cf94b28

中提取这些值

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

How to passing data from component to another component on reactJs using map?

javascript

state

reactjs

react-props

react-component