时间戳

首页 > 解决方案 > 如何添加所需的反应选择？

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

问题描述

我正在使用 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>
  );
}

代码沙箱

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

标签： javascriptreactjsreact-selectrequired

解决方案

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

推荐阅读