Как я могу определить значение по умолчанию для Reaction-Select v1 - PullRequest
Новая
       35

Как я могу определить значение по умолчанию для Reaction-Select v1

1 голос
/ 10 июля 2019

У меня была реакция выбора, отображающая список электронных писем, и мне нужно сохранить выбранные электронные письма в качестве параметра по умолчанию, когда электронное письмо выбрано и сохранено, но значения по умолчанию не работают.Как я могу это сделать?

Вот мой выбранный компонент: 

  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?

Ответы [ 2 ]

1 голос
/ 10 июля 2019

Он у вас почти есть, но в этом случае вы устанавливаете value на selectedOption вместо defaultValue. Кроме того, вы меняете значение по умолчанию каждый раз, когда происходит изменение, которое не нужно. 

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

return (
  <div>
    <Select
      multi={true}
      name={props.name}
      options={makeEmailOptions(props.ccemailfilter)} 
      defaultValue={defaultVal} 
    />
  </div>
)
0 голосов
/ 12 июля 2019

Я пришел со следующим решением, так как мой компонент использует функцию для установки некоторых переменных для выбора, я использую useEffect для вызова этого с фильтром сразу после рендеринга страницы. 

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

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

Таким образом, handleChange вызывается для onChange элемента select и один раз после загрузки страницы, чтобы создать значение для элемента select для использования.

...