点击重置按钮React时，获取选择菜单的值

Question

我有一组选择菜单，当我使用重置按钮重置它们时，我需要找出所有菜单的值。

问题是，这只适用于选项的更改事件，我无法在第一次单击时使其适用于重置按钮，因为它没有检测到更改。

此处的代码示例：https://stackblitz.com/edit/react-rmp8kf

import React from 'react';
import { useState } from 'react';
import uuid from 'react-uuid';
export default function Select() {
const [value, setValue] = useState({
select1: '',
select2: '',
});
const selectOptions = [
{
options: [
{
text: 'All',
value: '0',
},
{
text: 'Blue',
value: '1',
},
{
text: 'Yellow',
value: '2',
},
{
text: 'Green',
value: '3',
},
],
},
{
options: [
{
text: 'All',
value: '0',
},
{
text: 'Black',
value: '1',
},
{
text: 'White',
value: '2',
},
],
},
];
const handleOnChange = (e) => {
const valueSelected = e.target.value;
setValue({
...value,
[e.target.name]: valueSelected,
});
printAllSelectValues();
};
const resetAllSelections = (e) => {
e.preventDefault();
setValue({
select1: '',
select2: '',
});
printAllSelectValues();
};
const resetSelection = (e) => {
e.preventDefault();
setValue({
...value,
[e.target.dataset.selectName]: '',
});
printAllSelectValues();
};
const printAllSelectValues = () => {
const selectMenus = document.querySelectorAll('select');
selectMenus.forEach((select) =>
console.log(select.name + '=' + select.value)
);
};
return (
<form>
<div>
<label>
<select
name="select1"
value={value.select1}
onChange={handleOnChange}
>
{selectOptions[0].options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
</label>
<button data-select-name="select1" onClick={resetSelection}>
Reset
</button>
</div>
<div>
<label>
<select
name="select2"
value={value.select2}
onChange={handleOnChange}
>
{selectOptions[1].options.map((option) => (
<option value={option.value} key={uuid()}>
{option.text}
</option>
))}
</select>
</label>
<button data-select-name="select2" onClick={resetSelection}>
Reset
</button>
</div>
<button onClick={resetAllSelections}>Reset All</button>
</form>
);
}

Answer 1

您链接的stackblitz沙箱似乎正是您需要做的。当：

1. 您可以在2个select元素中的任何一个中选择任何值
2. 使用每个选择元素侧面的重置按钮可以单独重置任何选择值
3. 通过使用"；全部复位"；按钮

问题出在哪里？是否要获取更新的值？

更新

好的。因此，react的本质是每个状态更新都是异步的，这意味着您需要等待状态更新发生才能使用其更新的值。现在，你不能使用promise或async/await来实现这一点，因为react是故意以这种方式构建的，并为你提供了实现这一目标的工具。因此，你需要使用useEffect钩子。

https://stackblitz.com/edit/react-bekzpz

注意：值得一提的是，你不需要从HTML元素中获取数据，但如果你想在react中操作DOM元素，你不应该使用文档，而是使用useRef钩子