Javascript/rect没有在子组件中运行-没有可点击的内容

Question

我正在使用tailwind和DaisyUI创建一个带有两个选项卡的页面。父组件保存选项卡，并为每个选项卡的内容调用一个子组件。这很好。

这个问题是，虽然所有内容都在子组件中正确显示和样式，但没有任何内容更改或更新。即使鼠标悬停也不会改变光标。就好像react/javascript没有在这些子组件中运行一样。选项卡可以工作，所以我知道它正在页面上运行。控制台中没有错误。

父应用程序-工作-选项卡工作良好

import ReportDeliveryIssue from "./reportDeliveryIssue";
import ScheduleVacationStop from "./scheduleVacationStop";
import { Link } from "react-router-dom";
function ManageMyDelivery({ tab }) {
return (
<div className="container mx-auto mt-20">
<div className="tabs tabs-wrapper">
<Link
to="/account/manageDelivery/reportDeliveryIssue"
className={`tab tab-lg tab-lifted ${
tab === "reportDeliveryIssue" ? "tab-active" : null
}`}
>
Delivery Issue
</Link>
<Link
to="/account/manageDelivery/scheduleVacationStop"
className={`tab tab-lg tab-lifted ${
tab === "scheduleVacationStop" ? "tab-active" : null
}`}
>
Stop Delivery
</Link>
</div>
<div
className="container"
style={{
border: "1px solid #CCC",
width: "100%",
minHeight: "50px",
borderRadius: "0px 10px 10px 10px",
zIndex: -99999,
position: "relative",
top: "-1px",
}}
>
{tab === "reportDeliveryIssue" && <ReportDeliveryIssue />}
{tab === "scheduleVacationStop" && <ScheduleVacationStop />}
</div>
</div>
);
}
export default ManageMyDelivery;

子应用程序-不工作(使用完整组件更新(

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useForm, useField } from "react-final-form-hooks";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
import ButtonWrapper from "../../../components/forms/ButtonWrapper";
import RadioWrapper from "../../../components/forms/RadioWrapper";
function ScheduleVacationStop() {
const onSubmit = () => {
console.log("Submitting");
};
const validate = (values) => {
const errors = {};
return errors;
};
const { form, handleSubmit, values, pristine, submitting } = useForm({
onSubmit,
validate,
});
const savePapers = useField("savePapers", form);
const stopPapers = useField("stopPapers", form);
const [value, onChange] = useState(new Date());
return (
<form onSubmit={handleSubmit}>
<div className={"container px-16 pt-16 mb-4 text-left"}>
<div className={"text-3xl mb-8 font-bold"}>Stop Delivery</div>
<div className="grid grid-cols-2">
<div className="mx-4">
<div className={"mb-8"}>
<div className="dropdown border-2 border-solid border-neutral-400 text-gray-400 p-2 font-bold w-full text-sm">
<label tabIndex="0" className="">
Stop delivery beginning
</label>
<div
tabIndex="0"
className="dropdown-content card card-compact w-64 p-2 shadow bg-primary text-primary-content"
>
<div className="card-body">
<h3 className="card-title">Card title!</h3>
<p>you can use any element as a dropdown.</p>
</div>
</div>
</div>
<Calendar
className={"w-full"}
calendarType="US"
onChange={onChange}
value={value}
/>
</div>
<div className="mb-4">
<RadioWrapper
name={"paperStatus"}
label={"Vacation Stop with Restart (SAVE MY PAPERS)"}
description={
"The newspaper delivery will stop during the time you are away and all papers will be delivered when you resume (14 days or less)."
}
value={0}
{...savePapers}
/>
</div>
<div>
<RadioWrapper
name={"paperStatus"}
label={"Vacation Stop with Restart"}
description={
"The newspaper delivery will stop and restart as requested."
}
value={1}
{...stopPapers}
/>
</div>
</div>
<div className={"mb-8"}>
<div className="dropdown border-2 border-solid border-neutral-400 text-gray-400 p-2 font-bold w-full text-sm">
<label tabIndex="0" className="">
Resume delivery beginning
</label>
<div
tabIndex="0"
className="dropdown-content card card-compact w-64 p-2 shadow bg-primary text-primary-content"
>
<div className="card-body">
<h3 className="card-title">Card title!</h3>
<p>you can use any element as a dropdown.</p>
</div>
</div>
</div>
<Calendar calendarType="US" onChange={onChange} value={value} />
</div>
</div>
<div className="divider"></div>
</div>
<div className="mx-12">
<div className="alert alert-info shadow-lg px-12 text-white">
<div>
<span>
To adjust an existing vacation stop, please call Customer Service
at 214-745-8383 or 1-800-925-1500.
</span>
</div>
</div>
</div>
<div className="divider"></div>
<div className={"container flex justify-between px-16 pt-2 pb-8"}>
<div className={"uppercase text-sm text-sky-500 font-bold"}>
<Link to="/account/dashboard">Return to Dashboard</Link>
</div>
<ButtonWrapper
buttonType="submit"
handleClick={() => handleSubmit(values)}
buttonText={"Submit"}
/>
</div>
</form>
);
}
export default ScheduleVacationStop;

Answer 1

所以，这是一个奇怪的情况。有一个div用来存放选项卡，还有一个div用于存放所有选项卡内容。我在每个子组件上设置了一个条件，只有在选择了相应的选项卡时才会显示。

为了使活动选项卡正确显示并去掉内容框顶部的边界线，我将内容的位置设置为相对位置，并将其提升一个像素。显然，这就是问题的原因。

解决方案是去掉它，将标签向下凸起一个像素。

不确定这是黛西的问题还是什么。