布爾狀態變數更改導致父組件消失？

我目前擁有的是一個名為 WhatDo.tsx 的父組件，它有一個按鈕，該按鈕應該打開一個名為 AddToWardrobe.tsx 的子組件，它目前只是一個要填寫的表單。為此，我使用了 { boolean ? （顯示 AddToWardrobe 組件）：（顯示打開組件的按鈕）}。但是，當我單擊按鈕時，并沒有打開 AddToWardrobe 組件，而是頁面中的所有內容都消失了，包括 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>
    )
}

這是 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 的表單也沒有像預期的那樣完整，但我覺得點擊按鈕應該渲染一些東西，或者至少不會讓整個父組件消失！

uj5u.com熱心網友回復：

<input>不能生孩子。但是在AddToWardrobeComponent 中，您將文本包含在<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>

標籤：javascript 反应 布尔值 父母

上一篇：Shell字串模式匹配：var="thisisatest";echo${var#t?st}不匹配

下一篇：使用嵌套類作為父類模板引數？