React-Bootstrap 从 Form-Select 获取值 [英] React-Bootstrap get value from Form-Select
问题描述
我有一个 React Bootstrap Form 组件,我想在其中获取选择表单控件的值.我试图用 onChange 更新我的钩子的值,但我似乎无法让它工作(类型始终保持为空字符串),我当前的代码如下.
I have a React Bootstrap Form component, in which I want to get the value of a select form control. I tried to update the value of one my hooks with an onChange, but I can't seem to get it to work (type always stays as an empty string), my current code is as follows.
const [type, setType]: any = useState('');
render(
<Form.Group controlId="formBasicSelect">
<Form.Label>Select Norm Type</Form.Label>
<Form.Control as="select" >
<option value="DICTUM">Dictamen</option>
<option value="CONSTANCY">Constancia</option>
<option value="COMPLEMENT">Complemento</option>
value={type}
onChange={(e: any) => setText(e.target.value)}
</Form.Control>
</Form.Group>
);
类似的方法适用于其他 Form 控件,但可能与 select 有所不同.
Similar approaches worked with other Form controls, but maybe there is something different about select.
推荐答案
value
和 onChange
需要成为 Form.Control
(作为道具).你把他们当孩子了,所以问题就来了.
value
and onChange
needs to be part of Form.Control
(as a prop). You have put them as children and hence the issue.
工作代码片段
<Form.Group controlId="formBasicSelect">
<Form.Label>Select Norm Type</Form.Label>
<Form.Control
as="select"
value={type}
onChange={e => {
console.log("e.target.value", e.target.value);
setType(e.target.value);
}}
>
<option value="DICTUM">Dictamen</option>
<option value="CONSTANCY">Constancia</option>
<option value="COMPLEMENT">Complemento</option>
</Form.Control>
</Form.Group>
这篇关于React-Bootstrap 从 Form-Select 获取值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!