Javascript 如何添加反应选择所需的内容？

我正在使用react select library为我的应用程序添加下拉菜单，但“必需”不起作用（我阅读了关于GitHub的一篇关于该库的讨论，创建者还没有添加该功能），所以现在我如何使select成为必需？（我在这里读到了另一篇同样问题的帖子，那里提出的解决方案对我不起作用）。我的代码是：

import React, { useState } from "react";
import Select from "react-select";

export default function App() {
  const [data, setData] = useState();
  const options = [
    { value: "1", label: "1" },
    { value: "2", label: "2" },
    { value: "3", label: "3" },
    { value: "4", label: "4" }
  ];

  const handleSubmit = (e) => {
    console.log(data);
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input required placeholder="name" />
        <Select
          options={options}
          onChange={(e) => setData(e.value)}
          value={options.filter(function (option) {
            return option.value === data;
          })}
          label="Single select"
          placeholder={"Select "}
          menuPlacement="top"
          required
        />

        <button> Submit</button>
      </form>
    </div>
  );
}

import React，{useState}来自“React”；
从“反应选择”导入选择；
导出默认函数App（）{
const[data，setData]=useState（）；
常量选项=[
{值：“1”，标签：“1”}，
{值：“2”，标签：“2”}，
{值：“3”，标签：“3”}，
{值：“4”，标签：“4”}
];
常量handleSubmit=（e）=>{
控制台日志（数据）；
};
返回(
setData（e.value）}
value={options.filter（函数（选项））{
返回option.value==数据；
})}
label=“单选”
占位符={“选择”}
menuPlacement=“顶部”
必修的
/>
提交
);
}

---

在我的代码中，我有两个常规输入（如果需要，可以正常工作），但我希望Select也是必需的。非常感谢您的任何建议。

我会跳出框框思考-在本例中，选择组件。您可以添加什么来获得相同的结果？我为你快速尝试了一下：

const [isValid, setIsValid] = useState(false);

// This effect runs when 'data' changes
useEffect(() => {
  // If there is data, the form is valid
  setIsValid(data ? true : false);
}, [data]);

...

return (
  <div>
    <Select ... />
    {!isValid && <p>You must choose a value</p>}
    <button disabled={!isValid}>Submit</button>
  </div>
)

const[isValid，setIsValid]=useState（false）；
//此效果在“数据”更改时运行
useffect（（）=>{
//如果有数据，则该表单有效
setIsValid（数据？真：假）；
}，[数据]；
...
返回(
{！isValid&您必须选择一个值
}
提交
)

在本例中，我们检查Select组件的状态-如果它为空（用户没有选择任何内容），则表单无效，并且“提交”按钮被禁用