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

b4wnujal  于 2023-05-08  发布在  React
关注(0)|答案(2)|浏览(97)

我正在尝试在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>
  )
}

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

t2a7ltrp

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

mwecs4sa2#

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

相关问题