代码之家 › 专栏 › 技术社区 › soccerway

默认值不显示在react hooks应用程序的选择下拉框中

react-hooks reactjs

soccerway · 技术社区 · 2 年前

在我的react hooks select下拉菜单中,不显示默认值。页面加载时我想显示 Select Position 在下拉列表中。有人能告诉我为什么它没有显示默认值吗?

代码沙箱链接: https://codesandbox.io/s/sad-diffie-kx9h49?file=/src/App.js:0-991

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [defaultValue, setDefaultValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);

  useEffect(() => {
    setDefaultValue(defaultValue);
  }, []);

  const handlePositionTypeChange = (e) =>
    console.log(positionType[e.target.value]);
  return (
    <div className="App">
      <label>Position</label>
      <select
        defaultValue={defaultValue}
        onChange={(e) => handlePositionTypeChange(e)}
        key={defaultValue}
        className="browser-default custom-select"
      >
        {positionType.map((position, key) => (
          <option value={key}>{position}</option>
        ))}
      </select>
    </div>
  );
}

1 回复 | 直到 2 年前

Shubham Sharma 2 年前

import "./styles.css";
import React, { useEffect, useState } from "react";

export default function App() {
  const [selectedValue, setSelectedValue] = useState("Select Position");
  const [positionType, setPositionType] = useState([
    "Goal Keeper",
    "Striker",
    "Attacking Midfielder",
    "Right Midfielder",
    "Defending Midfielder",
    "Left Midfielder",
    "Center Back",
    "Right Fullback",
    "Left Fullback"
  ]);


  const handlePositionTypeChange = (e) => {
    console.log("e.target.value", e.target.value);
    setSelectedValue(e.target.value);
  };
  return (
    <div className="App">
      <label>Position</label>

      <select
        value={selectedValue ? selectedValue : ""}
        onChange={handlePositionTypeChange}
        className="browser-default custom-select"
      >
        <option value="Select Position" disabled>
          Select a color...
        </option>
        {positionType?.map((position, key) => (
          <option key={key} value={position}>
            {position}
          </option>
        ))}
      </select>
    </div>
  );
}