React Bootstrap Select，第一个 Select 选项未由 onChange 事件触发

Question

我正在使用 React Boostrap Select 组件：

  <Form.Group className="mb-1">
    <Form.Label
      htmlFor="type"
      className="iig-form-label d-inline-block text-truncate"
    >
      Type de projet &nbsp;
      {loadingTypes && <Spinner animation="grow" size="sm" />}
    </Form.Label>
    <Form.Select
      required
      aria-label="Default select example"
      id="type"
      name="type"
      onChange={(e) => handleChange(e)}
      isInvalid={false}
    >
      // THIS IS THE DEFAULT OPTION THAT IS NOT TRIGGERED    <-------------------
      <option
        value={currentType ? currentType["@id"] : ""}
        data-category={
          currentType ? currentType?.category?.label : ""
        }
      >
        {currentType
          ? currentType.label
          : `Choisir parmi la
        liste des types de projets`}
      </option>
      {filteredTypes.map((filteredTypes, key) => {
        return (
          <option
            value={`/api/types/${filteredTypes.id}`}
            data-category={filteredTypes.category.label}
            key={key}
          >
            {filteredTypes.label}
          </option>
        );
      })}

我添加了一个默认选项来显示。

当我点击默认选项时，onChange 事件没有被触发。

我该如何解决？

Answer 1

我无法按照您的示例进行操作，因此我创建了一个最小示例来向您展示它是如何工作的：

创建状态来存储值，并将select编辑选项的id/value作为默认值
编写 onChange 处理程序
将状态值和 onChange 处理程序传递给Form.Select
在 Form.Select 中遍历你的 select 选项列表

.

const selectOptions = [
  { value: "js", label: "Javascript" },
  { value: "ja", label: "Java" },
  { value: "py", label: "Python" },
  { value: "go", label: "Go" },
  { value: "cs", label: "C#" }
];

export default function App() {
  const [value, selectValue] = useState("js");
  const handleChange = (event) => selectValue(event.target.value);
  return (
    <Form.Group className="mb-1">
      <Form.Select value={value} onChange={handleChange}>
        {selectOptions.map((option) => {
          return <option value={option.value}>{option.label}</option>;
        })}
      </Form.Select>
    </Form.Group>
  );
}

https://codesandbox.io/s/dreamy-gwen-yfmw1m

React Bootstrap Select，第一个 Select 选项未由 onChange 事件触发

React Boostrap Select, First Select Option ins not triggered by onChange event

javascript

jsx

dom-events

reactjs

react-bootstrap