带有图标的 React-Bootstrap FormControl

Posted 2023-02-22

【中文标题】带有图标的 React-Bootstrap FormControl

【英文标题】：React-Bootstrap FormControl with Icon

【发布时间】：2017-10-12 07:30:50

【问题描述】：

我正在尝试使用 React Bootstrap 和 react-fa (font-awesome) 将图标添加到输入字段。我可以在表单控件组件上设置一个道具吗？下面的代码我已经插入了一个图标，但它显然是在输入上方而不是里面。

<form>
    <FormGroup
        controlId="formBasicText"
        validationState=this.getValidationState()
        className="login-form">
        <ControlLabel>Email address</ControlLabel>
        <Icon spin name="spinner" />
        <FormControl
            type="text"
            value=this.state.value
            placeholder="Your email"
            onChange=this.handleChange
            className="login-input" />
        <ControlLabel>Password</ControlLabel>
        <FormControl
            type="text"
            value=this.state.value
            placeholder="Your password"
            onChange=this.handleChange
            className="login-input" />
        <FormControl.Feedback />
    </FormGroup>
    <Button bsStyle="success btn-raised btn-block" bsSize="large" onClick=this.closeModal>Let's Go</Button>
</form>

【参考方案1】：

有一个快速简便的“开箱即用”解决方案。 只需将您的<Form.Control> 包裹在<InputGroup> 中并添加一个<InputGroup.Prepend>，其中将包含您希望包含的图标。 <InputGroup.Prepend>的内容不受限制，可以是文字、符号、其他组件等。

请记住，由于我们可能使用了不同版本的 react-bootstrap，因此语法发生了一些变化。

我包含了我的代码示例，它在文本输入字段中使用了 react-fontawesome 图标。

                 <Form.Row>
                    <Form.Group as=Col>
                        <InputGroup>
                            <InputGroup.Prepend>
                                <InputGroup.Text>
                                    <FontAwesomeIcon icon="search" />
                                </InputGroup.Text>
                            </InputGroup.Prepend>
                            <Form.Control
                                type="text"
                                placeholder="Search here.."
                            />
                        </InputGroup>
                    </Form.Group>
                </Form.Row>

看起来像这样：

可以在here 找到 react-bootstrap 的官方示例。 希望有帮助！干杯！

PS：使用的库 “反应引导”：“^1.0.0-beta.8”（引导 4.3）和 "@fortawesome/react-fontawesome": "^0.1.4"

【参考方案2】：

根据docs，它看起来不像react-bootstrap 支持font-awesome 开箱即用的图标。但是，您似乎可以作弊。可以将<FontAwesome> 控件放在<FormControl.Feedback> react-bootstrap 控件中，并让它在文本框中显示图标。

我使用react-bootstrap 0.31.0 版对此进行了测试。我还使用了react-fontawesome NPM 包 (here) 来实际添加图标。您将执行以下操作：

<ControlLabel>Email address</ControlLabel>
<FormControl
    type="text"
    value=this.state.value
    placeholder="Your email"
    onChange=this.handleChange
    className="login-input"
/>
<FormControl.Feedback>
    <span style= top: '5px' >
        <FontAwesome name="check" spin key="icon" />
    </span>
</FormControl.Feedback>

需要添加<span> 和内联样式才能使图标正确居中。我怀疑这是必要的，因为我违反了<FormControl.Feedback> 如何呈现图标的一些规则。当我改用<Glyphicon> 时，不需要这样做。不幸的是，<Glyphicon> 没有内置的自旋/旋转功能。

有点黑，所以谨慎使用。

【参考方案3】：

我只使用引导程序和包图标（react-icons）

<div className="input-group col-md-4">
                <input className="form-control py-2 border-right-0 border" type="search" defaultValue="search" id="example-search-input" />
                <span className="input-group-append">
                <div className="btn btn-outline-secondary border-left-0 border">
                <FaBeer/>
                </div>
                </span>
            </div>

【参考方案4】：

不幸的是，React Bootstrap 没有开箱即用的输入组件图标道具。或者，React Semantic UI 确实有一个用于输入的道具图标。请参阅此处的文档：https://react.semantic-ui.com/elements/input/

如果您仍想使用 React Bootstrap，您可以在 InputGroup 中创建一个 div 元素，并将该元素的样式设置为 position: absolute 并使用 top 和 right css 元素根据需要进行调整。解决方法如下：

//Your JSX file

      <InputGroup>
        <FormControl
          type="text"
          placeholder="Search..."
          onChange=this.handleChange.bind(this)
        />
        <div className="search-icon">
          <i class="fas fa-search" />
        </div>
      </InputGroup>

//CSS

.search-icon 
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 9999; /*this will keep the icon appearing all time, even when on input::focus*/

【讨论】：

问题是如何用 react-bootstrap 来做。不是哪个框架能够添加图标..