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

Question

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

如果是的话，有人可以给我一个例子吗？

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

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

Answer 1

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

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

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

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

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

Answer 3

您可以像 react-icons 网站一样直接将🔍（表情符号）粘贴到占位符中。 https://react-icons.github.io/react-icons/

Answer 4

我正在尝试这个解决方案：

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

直到我像这样删除占位符参数周围的{}后，才显示搜索图标：

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