使用 React 在输入占位符中使用 FontAwesome 图标

Question

我正在使用 React 创建一个应用程序，我想使用 FontAwesome 图标将它们包含到输入占位符中，这样它看起来像

<input type="text" placeholder="[here should be the user icon] Username" />

我怎样才能做到这一点？我用过" Username"，它只显示一个正方形而不是一个图标。也许我忘记了什么？

Answer 1

尝试将您的图标包含在内，InputAddon而不是将其强行放入占位符中。您可以通过几种方法来做到这一点。我建议使用下面列出的两个。

方法一：引导程序

您可以安装 bootstrap 并使用input-group-prepend或input-group-append类并将您的图标放在那里。

例子：

    import { FaUserAlt } from 'react-icons/fa';

    render() {
      return (
        <div className="input-group mb-3">
          <div className="input-group-prepend">
            <i className="classes you have"><FaUserAlt /></i>
        </div>
        <input type="text" className="form-control" placeholder="Username" />
       </div>
     )
  }

这将需要您安装bootstrap和react-icons. 安装bootstrap将允许您使用它们，classNames并且react-icons安装将允许您将其用作<FaUserAlt />组件而不是通过 CSS。要安装，bootstrap请使用：npm i bootstrap. 要安装，react-icons请使用：npm i react-icons.

方法 2：Reactstrap

您可以使用reactstrap本质上是 Bootstrap 来进行反应。这将要求您同时安装reactstrap、react-icons和 ，bootstrap如下所示：npm i reactstrap bootstrap react-icons。

示例：来自reactstrap文档（略有改动）

import React from 'react';
import { InputGroup, InputGroupText, InputGroupAddon, Input } from 'reactstrap';
import { FaUserAlt } from 'react-icons/fa';
const Example = (props) => {
  return (
    <div>
      <InputGroup>
        <Input placeholder="Username" />
        <InputGroupAddon addonType="append">
          <FaUserAlt />
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
};

export default Example;

替代方法

您可以简单地使用 CSS 完成上述操作。如果您只使用这个“图标占位符”一次，我会走这条路。但是，如果您在整个应用程序中始终这样做，我认为研究上述两种方法可能是值得的。

希望这对遇到此问题的人有所帮助。