时间戳

首页 > 解决方案 > React：捕获自动设置的选择选项

javascript - React：捕获自动设置的选择选项

问题描述

我有一个选择框，选项是自动选择的，具体取决于您username的效果，但我正在努力寻找一种方法来捕获自动选择的选项的值。

目前我有一个功能可以onChange做到这一点，但因为这些值是自动设置的，它显然绕过了 onChange。

有任何想法吗？

JSX：

        <div class="select">
          <select
            id="ic"
            onChange={(e) =>
              incidentCommand(getIncidentCommander(e.target.value))
            }
          >
            <option selected disabled>
              Incident Commander
            </option>
            {getIcUsername == "ayushl" ? (
              <option value="ayushl" selected>
                Ayush Lal
              </option>
            ) : (
              <option value="ayushl">Ayush Lal</option>
            )}
            {getIcUsername == "BarrieP" ? (
              <option value="barriep" selected>
                Barrie Pocock
              </option>
            ) : (
              <option value="barriep">Barrie Pocock</option>
            )}
            {getIcUsername == "joeld" ? (
              <option value="joeld" selected>
                Joel Douglas
              </option>
            ) : (
              <option value="joeld">Joel Douglas</option>
            )}
            {getIcUsername == "NevashR" ? (
              <option value="nevashr" selected>
                Nevash Reddy
              </option>
            ) : (
              <option value="nevashr">Nevash Reddy</option>
            )}
            {getIcUsername == "SchalkB" ? (
              <option value="schalkb" selected>
                Schalk Burger
              </option>
            ) : (
              <option value="schalkb">Schalk Burger</option>
            )}
          </select>
        </div>

TIA

标签： javascriptreactjs

解决方案

我要指出的第一件事是你不应该使用selected道具来自动选择 a 中的默认值<select>。相反，您应该使用 JSX 的defaultValue道具。话虽如此，useRef()是获取默认值的一种方法。这是想法：

export default function App() {
  const select = useRef();

  useEffect(() => {
    console.log(select.current.value);
  }, []);

  return (
    <div className="App">
      <h1>Select</h1>

      <select ref={select} id="ic" onChange={(e) => console.log("onchange")}>
        <option value="option1">Option 1</option>

        <option value="option2" selected>
          Option 2
        </option>

        <option value="option3">Option 3</option>
      </select>
    </div>
  );
}

再次，我强烈建议您使用defaultValue道具，所以这是正确的方法：

...
<select ref={select} id="ic" defaultValue="option2" onChange={(e) => console.log("onchange")}>
        <option value="option1">Option 1</option>
        <option value="option2">
          Option 2
        </option>
...
...

useEffect将在渲染时向您显示预先选择的值。您可以以相同的方式从任何其他函数访问该值：select.current.value

沙盒：https ://codesandbox.io/s/confident-hellman-bceeu?file=/src/App.js

添加：

以下是如何自动选择特定用户名：

<select
   id="ic"
   onChange={(e) =>
      incidentCommand(getIncidentCommander(e.target.value))
   }
   defaultValue={getIcUsername.toLowerCase()}
>
    <option disabled>Incident Commander</option>
    <option value="ayushl">Ayush Lal</option>
    <option value="barriep">Barrie Pocock</option>
    <option value="joeld">Joel Douglas</option>
      ...
      ...
</select>

这就是你所需要的。

推荐阅读