0

页面截图以获得清晰的理解我已经创建了用于显示项目的选项卡。此页面包含两个选项卡选项和一个日历。

问题是当我单击日历日期进行选择时，选项卡选项没有被取消选择。

我希望在单击特定组件时取消选择选项卡，即在日历组件上选择日期，但选项卡没有被取消选择。

这是页面的代码：

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

<StudentCalendarTabs className="calendar-tabs">
  <div
    style={{ width: "100vw", paddingLeft: "63px", backgroundColor: "white" }}
  >
    <div>
      <div className="sidenav">
        <div className="inboxTitle">Appointments</div>
        <TabList>
          <Tab
            onClick={() =>
              this.setState({
                dataFiltered: false,
                dataFiltered1: false,
                date: ""
              })
            }
          >
            Upcoming
          </Tab>

          <Tab
            onClick={() =>
              this.setState({
                dataFiltered1: false,
                dataFiltered: false,
                date: ""
              })
            }
          >
            Past
          </Tab>
        </TabList>
        <Calendar_styles>
          <div className="calheader">Select Date</div>
          <div className="control">
            <StyledCalendar
              onChange={date => {
                this.dateChanged(date);
                this.onTodoClick(date);
              }} //this where I am selecting a date on a calender. so when I choose/click on a date here then upper tabs should get deselected.
              value={this.state.date}
              nextLabel={<Direction />}
              prevLabel={<Direction className="left" />}
              next2Label={<span />}
              prev2Label={<span />}
            />
          </div>
        </Calendar_styles>
      </div>
    </div>
  </div>
  <TabPanel className="past-tab">
    {this.props.calendar.upcoming.length > 0 &&
      this.state.dataFiltered == false && (
        <AppointmentsCount>
          <StyledCalendarDates dates={this.props.calendar.upcoming} />
        </AppointmentsCount>
      )}
    {!this.props.calendar.upcoming.length && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <CalendarNoDates>{`No Upcoming Appointments`}</CalendarNoDates>
      </AppointmentsCount>
    )}
  </TabPanel>
  <TabPanel className="upcoming-tab">
    {this.props.calendar.past.length > 0 && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <StyledCalendarDates dates={this.props.calendar.past} />
      </AppointmentsCount>
    )}
    {!this.props.calendar.past.length && this.state.dataFiltered == false && (
      <AppointmentsCount>
        <CalendarNoDates>{`No Past Appointments`}</CalendarNoDates>
      </AppointmentsCount>
    )}
  </TabPanel>

  {this.state.filteredData.length > 0 && this.state.dataFiltered == true && (
    <AppointmentsCount>
      <StyledCalendarDates dates={this.state.filteredData} />
    </AppointmentsCount>
  )}
  {!this.state.filteredData.length && this.state.dataFiltered == true && (
    <AppointmentsCount>
      <CalendarNoDates>{`No Appointments`}</CalendarNoDates>
    </AppointmentsCount>
  )}
</StudentCalendarTabs>;
4

0 回答 0