select list返回关闭和重新打开后的上一个值

Question

我有一个列表，我从列表中选择一个值。

例如"Mercedes"

但是我用"Save"或";Close"按钮，当我再次打开它时，"梅赛德斯";被选中。我该如何预防呢?

<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属性来设置选择的默认选项(我想您的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>