如何添加required to react-select？

Question

我正在使用 react-select 库为我的应用程序添加下拉菜单，但“必需”不起作用（我阅读了有关此库的 GitHub 的讨论，创作者的天堂' 添加了该功能），那么现在我如何使 select 成为必需的？（我在这里读到另一个 post 有同样的问题，那里提供的解决方案对我不起作用）。我的代码是：

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 也是必需的。非常感谢任何建议。

Answer 1

我会跳出框框思考——在本例中是 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 组件的状态 — 如果它为空（用户未选择任何内容），则表单无效且提交按钮被禁用。

如何添加required to react-select？

How to add required to react-select?

javascript

required

reactjs

react-select