单击重置按钮时获取 select 菜单的值 React

Question

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

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

此处的代码示例： 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. 您 select 任何 2 个 select 元素中的任何值
2. 您可以使用每个 select 元素侧面的重置按钮单独重置任何 select 值
3. 您可以使用“全部重置”按钮一次重置这两个值

问题是什么？ 您想获取更新的值吗？

更新

好的。 所以 react 的本质是每个 state 更新都是异步的，这意味着您需要等待 state 更新碰巧使用其更新的值。 现在，您不能使用 Promise 或 async/await 来执行此操作，因为 react 是故意以这种方式构建的，并为您提供了执行此操作的工具。 所以你需要为此使用 useEffect 钩子。

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

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