如何从 React Select Form 中获取价值

Question

抱歉，只是一个基本问题，但我有点卡在这里，无法在做出选择后找到任何方法从 React 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}
          />

我想获得用户选择的价值，并使用

userChoice

将其放入

useState

内容。

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

value 可以是 selectOptions 中定义的 YES 或 NO。但是如何将它传递给 userChoice。 我试过使用

onChange={(e) => setUserChoice(e.target.value)}

但是这个东西不起作用。

还尝试了

onInputChange={handleInputChange}

按照之前在 StackOverflow 上询问过的线程中的建议，但在这里不起作用。

Answer 1

onChange

回调处理程序被调用整个选择对象而不是

event

对象。因此它应该是这样的。

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

如果你只测试 YES / NO 值，那么使用，

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

Answer 2

如果您想要 id 或 int 值而不是文本，请确保将值设置为 id 并将文本设置为字符串值。如果你直接使用表格，你可以直接通过 e.target.value

<select id="branch" className="form-control" name='branch' } >
 {branch.map(e => (<option key={e.id}  value={e.id}   selected= >{e.branch}</option>))}   
                                </select>

然后直接在函数中调用它

const UpdateSubmit (e)=>{
        alert(e.target.branch.value)
........
}

如果你不这样做，你将只得到字符串值