布尔状态变量改变导致父组件消失?

Question

我现在有一个叫做WhatDo的父组件。它有一个按钮，该按钮应该打开一个名为addto衣橱的子组件。Tsx，目前只是一张需要填写的表格。为此，我使用了{布尔值?(show addto衣橱组件):(showbutton打开component)}。然而，当我点击按钮，而不是打开addto衣橱组件，一切都从页面上消失，包括WhatDo组件。

这是WhatDo的函数。Tsx(注意，未来按钮有两个占位符):

export default function WhatDo() {
const [showATW, setShowATW] = useState(false);

return(
<div className="WhatDo">
<div className="ActionNavText">
What would you like to do? 
</div>
<div className="ActionNavButtons">
<button id="actionbutton">placeholder</button>

<div className="Show__ATW">
{showATW? 
<div className = "ATW__shown">
<AddToWardrobe onSubmit={postNewItem}/>
<button onClick ={() => setShowATW(false)}>Nvm!</button>
</div>
:
<button id="actionbutton" onClick={() => {setShowATW(true)}}>Add to your Wardrobe</button>
}
</div>
<button id="actionbutton">placeholder</button>
</div>
<div className="SignOutButton">
<button onClick={signOut}>sign out?</button>
</div>
</div>
)
}

下面是addto衣柜。tsx的函数:

interface Props {
onSubmit:(Item: Item) => void;
}
export default function  AddToWardrobe({onSubmit}: Props) {
const [itemType, setItemType] = useState<string[]>([]);
const [itemPrinted, setItemPrinted] = useState(false);
const [itemColor, setItemColor] = useState<string[]>([]);
const [secondaryColor, setSecondaryColor] = useState<string[]>([]);
//type check boxes
const [accessoryBox, setAccessoryBox] = useState(false);
const [topBox, setTopBox] = useState(false);
const [bottomBox, setBottomBox] = useState(false);
const [shoeBox, setShoeBox] = useState(false);

const handleTypeSet = (e: any) => {
const typeValue = e.target.value;

// check for item type
if(typeValue === "Accessory") {
setItemType(e.target.checked);
}
if(typeValue === "Top") {
setItemType(e.target.checked);
}
if(typeValue === "Bottom") {
setItemType(e.target.checked)
}
if(typeValue === "Shoes") {
setItemType(e.target.checked);
}
}
//check whether or not printed
const handlePrintChange = (e: any) => {
const printValue = e.target.value;
if (printValue === true) {
setItemPrinted(e.target.checked);
} // else false, I guess? 
}
function handleSubmit(e:FormEvent) {
e.preventDefault();
const CurrentItem: Item = {
type: itemType,
printed: itemPrinted,
primaryColor: itemColor,
secondaryColor: secondaryColor,
}
onSubmit(CurrentItem);
//probably here the addtowardrobe component will close/return to main screen
// display a message that says if the item was added successfully or not
}
return (
<div className = "AddToWardrobe">
<form onSubmit={handleSubmit}>
<label className = "ATW__question">What would you like to add?</label>
<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
</div>
<label>Is this item printed, textured, or solid?</label>
<div className="ATW__primarycolor">
<input type="checkbox"></input>
</div>
<input className='submit' type="submit"value ="Submit"/>
</form>
</div>
)
}

值得注意的是，addto衣橱的表单也不像它将要的那样完整，但我觉得点击按钮应该渲染一些，或者至少不会使整个父组件消失!

Answer 1

<input>不能生育。但是在AddToWardrobe组件中，您将文本包含在<input>

中。

<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox}>Accessory</input>
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox}>Top</input>
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}>Bottom</input>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}>Shoes</input>
</div>

不如这样写

<div className="ATW__input">
<input type="checkbox" value="Accessory" onChange={handleTypeSet} checked={accessoryBox} />
<input type="checkbox" value="Top" onChange={handleTypeSet} checked={topBox} />
<input type="checkbox" value="Bottom" onChange={handleTypeSet} checked={bottomBox}/>
<input type="checkbox" value="Shoes" onChange={handleTypeSet} checked={shoeBox}/>
</div>