布尔状态变化会导致父组件消失吗？

Question

我目前拥有的是一个名为whatdo.tsx的父组件，该按钮应打开一个称为AddTowardRobe.tsx的子组件，目前只是要填写的表单。为此，我使用了{布尔值？ （显示AddTowardrobe组件）:(向打开组件显示按钮）}。但是，当我单击按钮时，而不是打开AddTowardrobe组件，而是从页面上消失了，包括哪个组件。

这是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>
    )
}

这是AddTowardRobe.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>
    )
}

可能值得注意的是，AddTowardRobe的表格也不是完整的，但是我觉得要单击按钮应该是 的东西，或者至少没有使整个父组件消失了！

Answer 1

＆lt;输入＆gt;不能有孩子。但是在addtowardrobe组件中，您将文本包含在＆lt; input＆gt;中，

  <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>