如何从 React Select Form 获取值

Question

抱歉，我只是问一个基本问题，但我有点卡在这里，无法在做出选择后找到任何方法从 React Select 获取值。

这是一个简单的Select离子设置。

    const selectOptions = [
            { value: 'YES', label: 'Set to Active' },
            { value: 'NO', label: 'Set to Mute' }
       ]

    <Label className='form-label'>Select</Label>
         <Select
            isClearable={false}
            className='react-select'
            classNamePrefix='select'
            options={selectOptions}
            theme={selectThemeColors}
          />

我想根据用户选择获取值并使用 useState 将其放入 userChoice 内容中。

const [userChoice, setUserChoice] = useState("")

value 可以是 selectOptions 中定义的 YES 或 NO。但是如何将它传递给 userChoice。我尝试使用 onChange={(e) => setUserChoice(e.target.value)} 但是这个东西不起作用。

还尝试了 onInputChange={handleInputChange} 之前在 Whosebug 上询问的线程中的建议，但在这里不起作用。

Answer 1

onChange 回调处理程序使用整个选择对象而不是 event 对象调用。所以应该是这样的。

 <Select
      ...
      ...
      onChange={(choice) => setUserChoice(choice)}
 />

如果您只测试 YES / NO 值，则使用，

onChange={(choice) => setUserChoice(choice.value)}

如何从 React Select Form 获取值

How to get value from React Select Form

reactjs

react-select

react-hooks