带有图标的 React-Bootstrap FormControl

Question

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

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

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

它看起来像这样：

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

PS：库使用“react-bootstrap”：“^1.0.0-beta.8”（bootstra 4.3）和“@fortawesome/react-fontawesome”：“^0.1.4”

Answer 2

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

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

<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>没有内置的旋转/旋转功能。

有点黑客，所以谨慎使用。

Answer 3

我只使用引导程序和包图标（反应图标）

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

Answer 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*/
}