onChange 在 React 中的 react-bootstrap Modal 和 react-draggable 组件中的 react-select Dropdown 中不起作用

Question

我在 React 项目中使用 react-select 库来呈现下拉选择框。我定义了一个选项数组，其中包含一个带有标签“a”的选项。我还定义了一个 onChange 函数，它应该在选择一个选项时将所选选项记录到控制台。

此外，我正在使用 react-bootstrap 库的 Modal 组件创建弹出窗口，并使用 react-draggable 库的 Draggable 组件使弹出窗口可拖动。

这是我的代码：

import React from "react";
import Select from "react-select";
import Modal from 'react-bootstrap/lib/Modal'
import Draggable from 'react-draggable'

function App() {
  const onChange = (selectedOption) => {
    console.log("Selected Option:", selectedOption);
  };

  const options = [
    {
      label: "a",
    },
  ];

  const style={
    width:"100px",
    height:"100px",
    backgroundColor:"green"
  };  

  return (
    <div>
      <Draggable>
        <Modal show={true}>
          <Modal.Body>
            <div style={style}>Comp</div>
          </Modal.Body>
        </Modal>
      </Draggable>
      <div style={style}>
        Comp2
      </div>
      <Select options={options} onChange={(option) => onChange(option)} />
    </div>
  );
}

export default App;

尽管一切似乎都设置正确，但当我打开下拉菜单并选择“a”选项时，没有调用 onChange 函数。

谁能帮我弄清楚为什么在选择一个选项时没有调用 onChange 函数？

Answer 1

在

options

对象中，每个元素必须包含一个

value

属性。

const options = [
    {
        value: "a",
        label: "a",
    },
];