選擇列表在關閉和重新打開后返回先前的值

Question

我有一個列表，我從列表中選擇一個值。

例如“梅賽德斯”。

但是我用“保存”或“關閉”按鈕關閉了這個列表，當我再次打開它時，選擇了“梅賽德斯”。 我怎樣才能防止這種情況？

    <Modal isOpen={app.showCars} >
        <ModalHeader>
        </ModalHeader>

        <ModalBody>
            <Select
                options={carList}
                onChange={(car) => (app.addcar = car)}
                value={app.addcar }
            />
        </ModalBody>

        <ModalFooter>
            <Button onClick={() => {
                app.addcar()
                app.showCarModal = false;
            }}>Save</Button>

            <Button onClick={() => {
                app.showCarModal = false;
            }}> Close </Button>
        </ModalFooter>
    </Modal>

Answer 1

（我從我的其他答案之一借用了這段代碼，因為更改它比嘗試找出您正在使用的 UI 庫更容易。您可以忽略其中的大部分 - 重要的部分在底部的Example組件中。 )

回到我的評論：

保持上次選擇的選項的狀態，然后在再次呈現選擇時使用該狀態聲明默認選擇的選項。

父組件（ Example ）應該管理模式（打開或關閉）和當前選擇的狀態。 因此，我們初始化了一個名為selected的新狀態，可以使用相應的setSelected函數對其進行更新。

我們將該狀態和一個處理程序傳遞給Select組件。 我們使用selected屬性設置 select 上的默認選項（我想您的 UI 庫Select組件也允許這樣做），並在選擇新選項時調用handleChange處理程序。 處理程序會更新狀態，因此每當模式再次打開時，都會預先選擇該選項。

 const { useState } = React; // Create the modal component which accepts two handlers, // and "children" which is the HTML you want to show function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return ReactDOM.createPortal( <div className="modal"> {children} <button className="closemodal" onClick={onClose} >Close </button> </div>, document.body ); } // Pass in the handler to the Nav component function Nav({ handleModal }) { return ( <nav> <a onClick={handleModal}>Open modal</a> </nav> ); } // ContactUs builds the form within the modal // We pass in the showModal state, and the handler function Select(props) { const { selected, handleSelected } = props; return ( <select defaultValue={selected} onChange={handleSelected}> <option selected disabled value="default">Select something</option> <option value="bob">Bob</option> <option value="sara">Sara</option> <option value="kevin">Kevin</option> <option value="teresa">Teresa</option> </select> ); } function Example() { const [ selected, setSelected ] = useState('default'); const [ showModal, setShowModal ] = useState(false); // Our main handler for the modal. It simply // toggles between true and false function handleModal() { setShowModal(!showModal); } // Sets a new state with the selected option value function handleSelected(e) { setSelected(e.target.selectedOptions[0].value); } return ( <div> <Nav handleModal={handleModal} /> <Modal isOpen={showModal} onClose={handleModal}> <Select selected={selected} handleSelected={handleSelected} /> </Modal> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') );

 nav { padding: 1em; margin: 0.2em; background-color: #efefef; } nav a { border: 2px solid #454545; padding: 0.25em; } nav a:hover { cursor: pointer; background-color: #dfdfdf; } .modal { position: fixed; inset: 0; background-color: white; margin: 0.5em; border: 2px solid #343434; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; overflow-y:scroll; transition: all 0.3s ease-in-out; z-index: 999; } fieldset { margin-bottom: 1em; background-color: #efefef; } .closemodal { padding: 0.5em; background-color: #336699; color: white; } .send { background-color: #44aa77; color: white; } .closemodal:hover, .send:hover { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>