如何在占位符中使用 React 图标？答案

【问题标题】：How can I use React icons in Placeholder?如何在占位符中使用 React 图标？
【发布时间】：2018-02-19 10:37:15
【问题描述】：

是否可以在输入字段的placeholder 属性中使用 React 图标，例如输入文本？

如果可以，有人可以举个例子吗？

我是这样做的，但我在占位符中得到了 [object object] 而不是 Icon

var  emailIcon = <FaEnvelopeO  size={10}  />;
<Field
 placeholder={emailIcon}
 name="email"
 type="text"
 component={this.renderField}
/>

【问题讨论】：

标签： javascript html reactjs redux placeholder

【解决方案1】：

不，占位符仅包含文本。看下面的定义：

placeholder 属性将文本以浅灰色放置在输入中颜色。只要输入没有值，文本就会保留。

但是，您可以使用如下十六进制代码：

<input type="text" placeholder="&#xF002;" style="font-family:Arial, FontAwesome" />

【讨论】：

是的，我可以使用 hexcodes 来实现，但我想使用 React Icons :/.
当我使用十六进制代码时，我的占位符中只有一个正方形而不是图标？
您是否包含了 FontAwesome 库？
是的，我刚刚添加了 font-family: 'FontAwesome';进入我的占位符css，问题就解决了。谢谢楼主

【解决方案2】：

这是一个使用功能性 React 组件的示例，带有 React-Icons 和 Styled-Components 库。关键是图标和容器上的绝对和相对定位。希望这会有所帮助！

import React from "react";

// libaries
import { IoMdSearch } from 'react-icons/io';
import styled from 'styled-components';

const SearchBarView = () => {
  return (
    <Search>
      <IoMdSearch style={{marginLeft: "1rem", position: "absolute"}} color="#623CEA" size="1.5em" />
      <SearchBar 
        id="search-bar" 
        type="text"
        placeholder="Search">
      </SearchBar>
    </Search>
  )
}

const Search = styled.div`
  padding: .5rem;
  position: relative;
  display: flex;  
  align-items: center;
  width: 100%;
`

const SearchBar = styled.input`
  padding: 1rem 1rem 1rem 3.5rem;
  width: 100%;
`

export default SearchBarView;

【讨论】：