如何使用map将数据从组件传递到reactJs上的另一个组件? [英] How to passing data from component to another component on reactJs using map?

问题描述

我有一个 react-big-calendar ，我想要单击新事件时，小时对话框将具有单击新事件中的小时值，例如，我从07:30到08:30单击鼠标，所以我想获得此我的对话框中的小时数表示为start和end状态的输入值，但是，单击按钮"Ajouterdisponibilité"时，他的位置位于日历上方，因此我具有相同的对话框，当我单击它时，将具有时刻，这两个时刻我都可以随时间更改.

我的代码沙箱是:

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

当我运行它时，两者的力矩相等.

我该如何解决?

解决方案

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

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

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 中提取这些值

I have a react-big-calendar, I want when I click on new event, the dialog of the hour will be having the values of the hour clicked on the new event, for example, I click the mouse from 07:30 to 08:30, so I want to get this hour on my dialog as the value of the input of start and end state, but, I have the same dialog by clicking on the button "Ajouter disponibilité" which his position is above of the calendar, when I click it I will have the hour of the moment, and at both of them I can change it with the clock.

My code sandbox is :

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

When I run it, I get the same value is moment for a both of them.

How can I fix it ?

解决方案

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

Because you're passing the required format for those text fields in as parameters to handleAjouter = (start, end), you can just bind them to your first element's start and end. You could use moment like you had, but it doesn't seem necessary.

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
    });
  };

Because your initial element, while it gets its initial value from start and end, its values are inside tranches[0].

So now it pulls those values in https://gyazo.com/d0f887a0fa3d4dfeff56919a7cf94b28

这篇关于如何使用map将数据从组件传递到reactJs上的另一个组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！