css 如何在React中的文本输入中获取图像？

b4wnujal 于 2023-05-08 发布在 React

关注(0)|答案(2)|浏览(96)

我正在尝试在React中创建一个SearchBar，作为其中的一个图标，类似于：

最初我有一个按钮，像这样：

const SearchBar = ({ width, text, marginBottom }) => {
  return (
    <button className='searchBar' type="text" style={{ width: width, marginBottom: marginBottom}}>
        <img src={search} alt="searchBar" />
        <p>{text}</p>
    </button>
  )
}

但是有一个按钮，我不能在那里输入任何东西，然后我切换到一个输入，但是不可能在输入标签中添加查尔兹。
我该如何解决这个问题？

css

来源：https://stackoverflow.com/questions/76196252/how-can-i-get-an-image-inside-a-text-input-in-react

2条答案

按热度按时间

t2a7ltrp1#

答案是你不能，你必须使用hmtl标签和css的技巧。
将输入和图像放在一个div中，然后将div样式化为一个输入：

.input-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 2px;
    border-width: 1px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
}

.input {
    border: none;
    outline: none;
    width: 100%;
}

<div class="input-container">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAAXNSR0IArs4c6QAAAKtJREFUOE/tkjEKhDAQRX8QNAewSBdBvP9FcgFJkxiEBMHCRhElMrMsu80Wbu00Kf5/8yfDCGNMxp8lHvje5nhhdV2jqiocx4GyLBFj5C7neaIoCuSc0bYt+r7nd1kWTNMEhoUQ0Fpj33duklJimIzWWmzbhqZp4L1H13VY1xUhhBdMRhLJJKXEPM+cqJTCOI6cRPowDBxCkzjnPvD7tzQFib/qW3+O5N6N4AIddHfdBQuQqAAAAABJRU5ErkJggg==" class="img" />
    <input type="text" class="input" placeholder="insert text" />
</div>

赞(0）回复(0）举报 2023-05-08

mwecs4sa2#

你是说一个带有搜索图标按钮的输入栏吗？你应该创建一个像div这样的 Package 器。在里面加一个按钮

赞(0）回复(0）举报 2023-05-08