React-Bootstrap FormControl with Icon

Question

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> 

Answer 1

それはreact-bootstrapようには見えませんがdocsに応じてボックスのうちfont-awesomeアイコンをサポートしています。しかし、それはあなたがカンニングすることができるように見えます。 <FontAwesome>コントロールを<FormControl.Feedback>react-bootstrapコントロール内に配置し、アイコンをテキストボックス内に表示させることができます。

react-bootstrapバージョン0.31.0を使用してテストしました。私は実際にアイコンを追加するのにreact-fontawesome NPMパッケージ（here）も使用しました。 <span>とインラインスタイルの追加が適切にアイコンを中央に必要だったこと

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

：あなたは、次のような何かをするだろう。 <FormControl.Feedback>がどのようにアイコンをレンダリングするかに関するいくつかのルールを壊しているので、それが必要だと思われます。私が<Glyphicon>を代わりに使用したときは、これは必要ありませんでした。残念ながら、<Glyphicon>のスピン/回転機能は組み込まれていません。

ハックのビットなので、注意して使用してください。