Question

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

    <?php
namespace App\Http\Controllers;

use Input;
use Illuminate\Http\Request;
use Validator;
use Mail;
use Redirect;

class ContactController extends Controller
{
public function getContactUsForm(){

        $data = \Input::all();

        $rules = array (
            'first_name' => 'required',
            'email' => 'required|email',
            'message' => 'required|min:5'
        );

        $validator = Validator::make ($data, $rules);

        if ($validator -> passes()){
           Mail::send('emails.contact', $data, function($bodyMessage) use ($data)
            {
                $bodyMessage->from($data['email'] , $data['first_name']);



     $bodyMessage->to('hera@22mail.com', 'He')->subject(' Contact Form');

                });
       return Redirect::to('/support/contact')
        ->with('message', 'Your message has been sent. Thank You!');


             }else{
            return Redirect::to('/support/contact')
             ->with('message', 'Feedback must contain more than 5 characters. Try Again.');

         }
     }
    }

Answer 1

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

我使用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>和内联样式才能正确居中图标。我怀疑这是必要的，因为我打破了<FormControl.Feedback>渲染图标的规则。我使用<Glyphicon>时并不需要这样做。不幸的是，<Glyphicon>没有内置旋转/旋转功能。

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

Answer 2

有一个快速简便的“开箱即用”解决方案。只需将<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的一个官方示例可以找到here。希望有帮助！干杯！

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

Answer 3

不幸的是，React Bootstrap没有开箱即用的输入组件图标的支持。另外，React Semantic UI确实有一个输入的道具图标。在此处查看文档：{{3}}

如果您仍然想使用React Bootstrap，则可以在InputGroup中创建一个div元素，并将该元素设置为playingUI <- function(id) { ns <- NS(id) tagList(# Create market and hand output uiOutput(ns("market")), uiOutput(ns("hand")), # Actionbutton to take cards actionButton(ns("take"), label = "TAKE")) } player_server <- function(input, output, session, cards) { # Pickerinput for Market output$market <- renderUI(tagList( pickerInput( inputId = session$ns("market1"), label = "Market", choices = cards$market, multiple = TRUE ), # Pickerinput for Hand pickerInput( inputId = session$ns("Hand"), label = "Hand", choices = cards$hand, multiple = TRUE ) )) } taking_server <- function(input, output, id, cards) { cards$hand <- c(cards$hand, "new") } ui <- fluidPage(playingUI('game')) server <- function(input, output, session) { # Define playing cards cards <- reactiveValues( # Define market market = c("Camel", "Gold", "Diamond"), # Define hand hand = c("Diamond", "Silver") ) callModule(player_server, 'game', cards) # Wrap the module 'taking_server' inside observe - does not work observeEvent(input$take, { callModule(taking_server, 'game', cards) }) } shinyApp(ui = ui, server = server)的样式，然后使用position: absolute和top css元素进行调整如所须。解决方法：

right

Answer 4

我仅使用引导程序并打包图标（反应图标）

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

带图标的React-Bootstrap FormControl

4 个答案: