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

如何解决如何添加所需的反应选择？

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

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>
  );
}

code sandbox

在我的代码中，我有几个常规输入（需要的地方工作正常），但我希望 Select 也是必需的。非常感谢任何建议。

解决方法

我会跳出框框思考——在本例中是 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>
)

https://codesandbox.io/s/vigilant-wiles-6lx5f

在这个例子中，我们检查 Select 组件的状态——如果它是空的（用户没有选择任何东西），表单无效并且提交按钮被禁用。