Question

我有一个简单的下拉列表，以24小时格式显示时间段。示例：

Select a time Slot 
--------------------
00 AM : 1:00 AM
--------------------
1:00 AM : 2:00 AM
--------------------
2:00 AM : 3:00 AM
--------------------
3:00 AM  : 4:00 AM
--------------------
4:00 AM  : 5:00 AM
--------------------
5:00 AM  : 6:00 AM
--------------------
-
-
-
-
--------------------
23:00 PM  : 24:00 AM
-------------------

So the above data come as array of objects :

[{"startTime" : "01","endTime":"02"},{"startTime" :"02" ,"endTime":"03"},{"startTime" :"03" ,"endTime": "04"},etc]


Now I have another array of objects , say availabilty slots :

[{"startTime" : "01","endTime":"02"},{"startTime" :"03" ,"endTime": "04"}]

期望：我想匹配两个对象数组，在列表中，应该启用匹配的对象，并禁用所有其他对象。

现在如何比较这两个数组对象并实现此功能？

任何人都可以指导如何在React中实现这一目标吗？

Answer 1

在使用循环呈现选项时，您可以确定当前对象是否在可用性槽数组中。然后，您可以相应地应用启用/禁用的课程。

查看以下代码是否有帮助。

const Dropdown = (slotArray=[], availabilityArr) => {
    return (
        <select>

             {
                 slotArray.map((currentSlot) => {
                     let isEnabled = availabilityArr.some((currAvailableSlot) => {currAvailableSlot.startTime === currentSlot.startTime && currAvailableSlot.endTime === currentSlot.endTime});

                     return (
                      <option value="yourValue" className={isEnabled? 'enabled-class': 'disabled-class'}>{currentSlot.startTime} to {currentSlot.endTime}</option>
                     )
                 });
             }
        </select>
    )
}

Answer 2

我们假设您有一个组件<Slot />，可以呈现特定的时间段：

class Slot extends React.Component {
   static propTypes = {
      startTime: PropTypes.string.isRequired,
      endTime: PropTypes.string.isRequired,
      active: PropTypes.boolean.isRequired
   }

   render () {
      const { startTime, endTime } = this.props;
      return <option>
        ${startTime} : ${endTime}
      </option>;
   }
}

一个容器类，它接收输入数据并呈现插槽：

class Picker extends React.Component {
   static propTypes = {
      allSlots: PropTypes.array.isRequired,
      availableSlots: PropTypes.array.isRequired
   }

   render () {
      const { allSlots } = this.props;
      return allSlots.map(slot => <Slot>
         startTime={slot.startTime}
         endTime={slot.endTime}
      </Slot>);
   }
}

然后考虑可用的插槽，您需要将其与当前渲染的内容进行比较：

   render () {
      const { allSlots, availableSlots } = this.props;
      return allSlots.map(slot => {
         const isAvailable = availableSlots.some(available => {
            return available.startTime === slot.startTime &&
                   available.endTime === slot.endTime
         }); // Compute 'isAvailable'
         return <Slot>
            startTime={slot.startTime}
            endTime={slot.endTime}
            active={isAvailable} // <-- Pass it down to the currently rendering `Slot`
         </Slot>;
      });
   }

您的Slot渲染功能将如下所示：

   render () {
      const { startTime, endTime, active } = this.props;
      return <option disabled={!active}>
        { startTime } : { endTime }
      </option>;
   }

React中的时间选择器

2 个答案: