如何在react-select中添加required属性？

Question

我正在使用react-select库为我的应用程序添加下拉菜单，但是"required"属性不起作用（我在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>
  );
}

代码沙盒

在我的代码中，我有一些常规输入（其中“required”正常工作），但我也希望选择框也是必填的。非常感谢任何建议。

- new_reactjs

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

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

- martenbjork