css - React-Bootstrap 的 Select 元素的验证未对齐

Question

我正在使用 React-Bootstrap（注意：我们使用的是相对较新的 v1.0.0！）

我可以很好地向我的表单添加验证，但它不能很好地与 Select 下拉菜单配合使用：

我该如何解决？ 是唯一的选择来确定将哪些手动 css 分层到控件上，以重新定位验证图标？

代码：

  <Form validated>
    <Form.Group>
      <Form.Label>Text Input</Form.Label>
      <Form.Control required type="text" value="foo"/>
    </Form.Group>
    <Form.Group>
      <Form.Label>Invalid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={''}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
    <Form.Group>
      <Form.Label>Valid Dropdown Input</Form.Label>
      <Form.Control required as="select" value={'2'}>
        <option key={'empty'} value={''}>...</option>
        <option key={'1'} value={'1'}>1</option>
        <option key={'2'} value={'2'}>2</option>
      </Form.Control>
    </Form.Group>
  </Form>

标签： cssreactjsvalidationreact-bootstrap

Answer 1

或者，您可以将自定义属性添加到Form.Control

请在下面找到代码片段供您参考

注意<Form.Control required as="select" custom> 中的自定义属性

<Form.Control required as="select" custom>
   <option value="">...</option>
</Form.Control>