Question

是否可以在输入字段i-e输入文本的placeholder属性中使用React图标？

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

我是这样做的，但不是Icon，而是在占位符

中得到了[对象]

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

Answer 1

这里是使用功能性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 2

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

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

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

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

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

2 个答案: