理想情況下，您應該盡量避免從 DOM 獲取狀態。
如果你控制狀態，讓 React 來渲染你的狀態，React 工作得很好。
下面是一個簡單的例子，基本上我所做的就是將狀態索引存儲到一個數組中。當我更新它時，React 視圖將相應地更新。你如何存儲狀態完全取決于你，而不是 DOM。
const {useState} = React;
const lookup = [
{id: 1, value: 'one'},
{id: 2, value: 'two'},
{id: 3, value: 'three'}
];
function List() {
const [selected, setSelected] = useState(-1);
const value = selected !== -1 && lookup[selected];
return <div>
<select
onChange={(e) => setSelected(e.target.value)}
value={selected}>
<option>Please Selected an option</option>
{lookup.map((m, ix) => {
return <option
key={m.id}
value={ix}
>
{m.value}
</option>
})};
</select>
{value &&
<div style={{marginTop: "2rem"}}>
You selected ID <span>{value.id}</span>
value
<span>{value.value}</span>
</div>}
</div>;
}
ReactDOM.render(<List/>, document.querySelector('#mount'));
body, select, option {
font-size: 20px;
}
select, option {
padding: 0.5rem;
}
body {
padding: 2rem;
}
span {
font-weight: bold;
margin: 1em;
background-color: yellow;
border: 1px solid black;
padding: 1em 1.5rem;
border-radius: 50%;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"/>
