select 列出 returns 关闭和重新打开后的先前值

Question

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

例如“梅赛德斯”。

但是我用“保存”或“关闭”按钮关闭了这个列表，当我再次打开它时，“Mercedes”被选中了。我该如何防止这种情况？

    <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 组件中。）

回到我的评论：

Maintain the state of the last selected option, and then use that state to declare the default selected option when the select is rendered again.

父组件 (Example) 应管理模态（打开或关闭）和当前 selection 的状态。所以我们初始化一个名为 selected 的新状态，可以使用相应的 setSelected 函数更新它。

我们将该状态和一个处理程序传递给 Select 组件。我们使用 selected 属性在 select 上设置默认选项（我想你的 UI 库 Select 组件也允许这样做），并调用 handleChange handler whenever a new option is chosen.处理程序更新状态，因此每当模式再次打开时，该选项将为 pre-selected.

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>

select 列出 returns 关闭和重新打开后的先前值

select list returns previous value after closing and reopening

javascript

reactjs