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

Question

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

如果是，谁能给我举个例子吗？

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

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

Answer 1

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

The placeholder attribute places text inside the input in a light gray color. The text remains whenever the input has no value.

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

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

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

How can I use React icons in Placeholder?

html

javascript

placeholder

reactjs

redux