从反应选择反应中的选项中自动选择值

Posted 2023-03-24

【中文标题】从反应选择反应中的选项中自动选择值

【英文标题】：Auto selected of value from options in react-select react

【发布时间】：2021-08-16 16:32:23

【问题描述】：

问题陈述：

---

我使用 react-select 2.4.1 作为 Select 下拉菜单。 我想根据某些条件从选项数组中自动选择值，并且自动选择的值也应该在组件状态下更新，反之亦然。

我怎样才能做到这一点？

我尝试了多种方法，请帮忙。 提前致谢。

下面是我选择下拉菜单的代码。

<Select
  options=props.mercModeOptions
  onChange=(evt) => setSelectedMercMode(evt.value)
  selected=props.mercModeDefaultOpt
/>  

下面是选项数组：

props.mercModeOptions = [
  
    value: "first", 
    label: "first"
  ,
  
    value: "second",
    label: "second"
  ,
  
    value: "third",
    label: "third"
  
]

要自动选择的值：

props.mercModeDefaultOpt = 
  value: "third",
  label: "third"
;

【问题讨论】：

第一次渲染 Select 时自动选择的值？

@Shyam，我们可以说是第一次。就像直到用户不更改下拉列表中的值，它应该显示自动选择的值。您对我实现这一目标有什么建议吗？

【参考方案1】：

我添加了示例codesandBox 来实现这一点。

我们可以使用 useMemo 钩子将默认值存储在变量中并更新本地状态。

import Select from "react-select";
import  useEffect, useMemo, useState  from "react";
const dropDowonData = [
   value: "first", label: "first" ,
   value: "second", label: "second" ,
   value: "third", label: "third" 
];
export default function App() 
  const [selectedValue, setSelectedValue] = useState();

  // This will run for only during the first render.
  const defaultSelectedValue = useMemo(() => 
    // to update the local state 
    setSelectedValue(dropDowonData[0]);
    
    return dropDowonData[0];
  , []);

  console.log(selectedValue);

  return (
    <div className="App">
      <Select
        defaultValue=defaultSelectedValue
        value=selectedValue
        onChange=(value) => setSelectedValue(value)
        name="Select"
        options=dropDowonData
      />
    </div>
  );