Question

我有一个反应选择呈现电子邮件列表，当选择并保存电子邮件时，我需要将所选电子邮件保留为默认选项，但是defaultValues不起作用。我该怎么办？

这是我的选择组件：

  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>
  )

我收到一切作为道具，并与之一起做出选择。如果选择的字段为true，我该怎么做才能将其设为默认值？

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)
  }

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

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

2 个答案: