带有图标的 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>在 an 中<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-bootstrap0.31.0 版本对此进行了测试。我还使用react-fontawesomeNPM 包（此处）来实际添加图标。你会做类似下面的事情：

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

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

有点 hack，所以请谨慎使用。