带图标的React-Bootstrap FormControl

我试图使用React Bootstrap和react-fa（font-awesome）将图标添加到输入字段。有没有可以在Form Control组件上设置的道具？下面的代码我插入了一个图标，但它显然在输入之上而不在里面。带图标的React-Bootstrap FormControl

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

来源

2017-05-12 jamesscaggs

我自己想知道同样的事情。你有没有想出一个解决方案？ –

它看起来并不像react-bootstrap支持font-awesome根据docs图标开箱。但是，看起来你可以作弊。可以在<FormControl.Feedback>react-bootstrap控件内放置一个<FontAwesome>控件，并让它在文本框内显示图标。

我使用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>和内联样式正确居中的图标。我怀疑这是必要的，因为我打破了一些关于如何渲染图标的规则。当我使用<Glyphicon>代替时，这不是必需的。不幸的是，<Glyphicon>没有内置旋转/旋转功能。

有点破解，请谨慎使用。

来源

2017-08-23 20:45:00

带图标的React-Bootstrap FormControl

回答

相关问题