帶圖標的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

回答

相關問題