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

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 沙箱似乎完全可以满足您的需求。在以下情况下，您可以正确获取两个值：

你 select 2 select 元素中任何一个的任意值
您可以使用每个 select 元素侧面的重置按钮单独重置任何 select 值
您使用“全部重置”按钮一次重置了两个值

有什么问题？您要获取更新后的值吗？

更新

好的。因此 React 具有每次状态更新都是异步的性质，这意味着您需要等待状态更新发生才能使用其更新后的值。现在，您不能使用 promises 或 async/await 来执行此操作，因为 react 是有意以这种方式构建的，并为您提供了这样做的工具。所以你需要为此使用 useEffect 钩子。

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

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

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

Get value of select menus when clicking reset button React

javascript

select

reset

reactjs

react-forms