时间戳

首页 > 解决方案 > React-Bootstrap 从 Form-Select 中获取价值

reactjs - React-Bootstrap 从 Form-Select 中获取价值

问题描述

我有一个 React Bootstrap Form 组件，我想在其中获取选择表单控件的值。我尝试使用 onChange 更新我的钩子的值，但我似乎无法让它工作（类型始终保持为空字符串），我当前的代码如下。

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 可能有所不同。

标签： reactjsreact-bootstrap

解决方案

value并且onChange需要成为Form.Control（作为道具）的一部分。您已将它们视为孩子，因此是问题所在。

您的代码的工作副本在这里

工作代码片段

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

推荐阅读