在输入字段 ReactJS 中添加按钮答案

【问题标题】：Add button inside Input field ReactJS在输入字段 ReactJS 中添加按钮
【发布时间】：2020-05-12 10:26:25
【问题描述】：

我想在React 中的input 中添加一个按钮。现在我知道我可以通过设置绝对按钮并使用css 将其放在那里，但我认为有更好的选择吗？

我将一个带有绝对值的字段移到那里，然后搜索文本可能会放在按钮下方。

这是我想要的最终结果，但有一个普通按钮也足够了。

这是我的输入框代码：

在这种情况下，我可以在彼此下方放置 2 个框，当我在 input 内放置一个按钮时，我收到 input can't have any child elements 的错误。

【问题讨论】：

没有更好的方法可以做到这一点，正如您从那个错误中看到的那样，您不能将元素放在 <input/> 中，因此使用 CSS 使图标 出现 i> 在他们里面是你唯一的选择。这也是所有 CSS 库（如 Bootstrap 和 Material UI）所做的

标签： javascript reactjs search input

【解决方案1】：

只是一个简单的代码sn-p，如何实现你的要求：

.inputWithButton {
  position: relative;
  height: 100px;
  width : 200px;
}

.inputWithButton input{
    width: 70%;
    height: 25px;
    padding-right: 60px;
}

.inputWithButton button {
  position: absolute;
  right: 0;
  top : 5px;
}

<div class='inputWithButton'>
  <input type="text"/>
  <button>Search</button>
</div>

您也可以在以下位置查看相同的更改：

【讨论】：

感谢您的回答，文本仍在按钮下方，这是我想避免的，但我想我可以继续从这里弄清楚。

【解决方案2】：

如果您的意图是只有一个“搜索按钮”，我可以推荐来自react-bootstrap 库的Input Group。您可以添加一个按钮，其中包含您想要的任何内容。（使用 v2.1.0 - Bootstrap 5）

<InputGroup className="mb-3">
  <FormControl placeholder="Search" />
  <Button variant="outline-secondary">?</Button>
</InputGroup>

【讨论】：

【解决方案3】：

你可以这样使用它。当我使用这些示例时，它们并没有用。

<input className=' ml-4 rounded-lg bg-inputbg  text-white placeholder-placeholder placeholder-opacity-75 pl-3'
      placeholder='Search'
      value={filterText}
      name="search"
      onChange={handleClick}
/>
<button className='bg-inputbg rounded-lg -m-4 pb-1'><AiOutlineSearch/></button>

我曾经顺风顺水 CSS 库。 -m-4 对似乎很重要。

【讨论】：