javascript - 只有在 React JS 中单击提交后才更新 Select Dropdown 状态

Question

我正在研究国家选择器组件，我只想在用户单击提交按钮时更新状态值。

1. 我试图将选定的下拉值存储在临时变量中但是选择的下拉值不会再次反映在 UI 中获取 UI 中的旧值

HeaderLeftComponent（这里我使用的是下拉状态）

const HeaderLeftSection = ( props ) => {

const [showCountry, setShowCountry] = useState(false);
const [ShowAccount, setShowAccount] = useState(false);
const [ShowWishlist, setShowWishlist] = useState(false);

const [countrySelector, setCountrySelector] = useState({
    country: "IN",
    currency: "INR"
});

const handleShowCountry = () => {
    setShowCountry(true);
}

const handleHideCountry = () => {
    setShowCountry(false);
}

const handleShowAccount = () => {
    setShowAccount(true);
}

const handleHideAccount = () => {
    setShowAccount(false);
}

const handleShowWishlist = () => {
    setShowWishlist(true);
}

const handleHideWishlist = () => {
    setShowWishlist(false);
}

const handleCountryAndCurrencyChange = (item) => {
    const Country = item;
}

const handleSaveCountry = (item) => {
    alert();
    setShowCountry(false);
}

return (
    <>
        <Model 
            show={showCountry} 
            hide={ handleHideCountry } 
            classModal="Country__selector--modal" 
            handleButtonClicked={handleSaveCountry}
            ModelHeader="true"
            ModelFooter="true"
            ButtonOneText="Save & Continue"
            ButtonSecondText="Cancel"
            block="true">
                <CountrySelector 
                    countrySelector={countrySelector} 
                    handleCountryAndCurrencyChange={handleCountryAndCurrencyChange} 
                />
        </Model>

        <Model 
            show={ShowAccount} 
            hide={handleHideAccount}  
            classModal="Account__form--modal"
            ModelHeader="true"
            ModelHeaderText="SIGN IN">
                <Login />
        </Model>

        <Model show={ShowWishlist} hide={handleHideWishlist} ModelHeader="true" ModelHeaderText="WISHLIST" classModal="Wishlist__form--modal">
            <p>WishList Test</p>
        </Model>

        <div className="Header__left-section">
            <div className="Header__left--countrySelector mr-5 icon" onClick={handleShowCountry}>
                <span>{countrySelector.country}</span>
                <span>{countrySelector.currency}</span>
            </div>
            <div className="Header__left--account mr-5">
                <Icon.Person className="icon" onClick={handleShowAccount}/>
            </div>
            <div className="Header__left--wishlist">
                <Icon.Heart className="icon" onClick={handleShowWishlist}/>
            </div>
        </div>
    </>
)
}

  export default HeaderLeftSection;

国家选择器组件

   const CountrySelector = ( props ) => {

return (
    <>
        <p>Shipping somewhere else?</p>
        <p>Simply select the destination you would like to deliver to and the currency you would like to shop in.</p>
        <Select List={countryList} label="Delivery To" size="sm" value={props.countrySelector.country} handleCountryAndCurrencyChange={props.handleCountryAndCurrencyChange}/>
        <Select List={currencyList} label="Shop in" size="sm" value={props.countrySelector.currency} handleCountryAndCurrencyChange={props.handleCountryAndCurrencyChange}/>
    </>
  )
}   

下面是选择下拉组件

const Select = ( props ) => {
return (
    <>
        <Form.Group>
            <Form.Label>{props.label}</Form.Label>
            <Form.Control as="select" size={props.size} value={props.value} custom onChange={(event) => props.handleCountryAndCurrencyChange(event.target.value)}>
                {
                    props.List.map((item, index) => {
                        return <option key={item.code} value={item.code}>{item.name}</option>
                    })
                }
            </Form.Control>
        </Form.Group>
    </>
)
} 

预期的 ：

当用户在国家选择器下拉列表中进行选择时，它应该反映在 UI 上（用户可以看到），但其状态不应更新。仅当用户单击提交按钮时才更新状态

提前致谢

标签： javascriptreactjs