我如何为 react-select v1 定义默认值

Question

我有一个 react-select 呈现电子邮件列表，我需要在 selected 和保存电子邮件时将 selected 电子邮件保留为默认选项，但默认值不起作用。我该怎么做？

这是我的 select 组件：

  const [selectedOption, setSelectedOption] = useState("")

  const makeEmailOption = item => ({
    value: item.id,
    label: item.ccEmail,
    id: item.id,
    chipLabel: item.ccEmail,
    rest: item,
    selected: item.selected
  })
  const makeEmailOptions = items => items.map(makeEmailOption)

  const handleChange = (value) => {
    setSelectedOption(value)
    props.emails(value)
  }

  return (
    <div>
      <Select
        multi={true}
        name={props.name}
        options={makeEmailOptions(props.ccemailfilter)} 
        onChange={handleChange}
        value={selectedOption} 
      />
    </div>
  )

我把所有的东西都当作道具来接受，然后用它来做出选择。如果字段 selected 为真，我该如何设置默认值？

Answer 1

您几乎已经做到了，但在这种情况下，您将 value 设置为 selectedOption，而不是设置 defaultValue。此外，每次更改时您都在更改默认值，这是不需要的。

const defaultVal = {value: selectedOption, label: selectedOption};

return (
  <div>
    <Select
      multi={true}
      name={props.name}
      options={makeEmailOptions(props.ccemailfilter)} 
      defaultValue={defaultVal} 
    />
  </div>
)

Answer 2

我提出了以下解决方案，因为我的组件使用函数将一些变量设置为 select，我使用 useEffect 在页面呈现后立即通过过滤器调用它。

  useEffect(()  => {
     handleChange(makeEmailOption(props.ccemailfilter.filter(x => x.selected)))
  }, [])

  const handleChange = (value) => {
    setSelectedOption(value)
    props.emails(value)
  }

因此，在 select 的 onChange 上调用 handleChange，并在页面加载后一次为 select 创建一个值以供使用。

我如何为 react-select v1 定义默认值

How can i define a default value for react-select v1

select

default

reactjs