如何在已更新的输入字段内显示图标？

Question

我有与对象映射的输入框。

如果输入已更新或任何用户在输入字段中键入内容然后提交，则寻找解决方案，然后该输入字段应在其中显示一个图标（例如，如果有人更新了第一个和最后一个输入字段，而不仅仅是第一个和最后一个字段应包含图标（管理员）其他输入框应保持原样。）

import React, { useState } from "react";
import Admin from 'icons'
//more imports

export default function InputCom() {
  
  const [value, setValue] = useState("");

  const data = [
    { label: "first", name: "first" },
    { label: "last", name: "last" },
    { label: "phone", name: "phone" },
  ];

  const handleChange = (event) => {
    setValue(event.target.value);
  };

const handleClick = () => {
console.log(vlaue)
}
  return (
    <div >
      <Card >
        <div >
          {data.map((item, key) => (
            <div key={key.name} >
              <input
                //icon={Admin}
                label={item.name}
                name={item.name}
                onChange={handleChange}
                placeholder="text"
                value={value}
              />
            </div>
          ))}
        </div>
      </Card>
     <button onClick={handleClick}>submit<button>
    </div>
  );
}

Answer 1

您可以创建一个名为InputWithIcon 的组件，它扩展了普通的<input> 标记，但还添加了图标。然后传递可选的 icon 属性，以便它仅在提供图标时呈现：

<InputWithIcon
  icon={!!this.state.value && Admin}
  ...
/>

将图标放在输入的右侧并调整样式，使其看起来好像图标在输入内。

这是伪代码：

const InputWithIcon = ({ icon, ...props }) => {
  return (
    <div>
      <input {...props} />
      {icon && <img src={icon} />}
    </div>
  );
};

样式：

div {
  position: relative;
}

img {
  position: absolute;
  right: 10;
  top: 10;
}

input {
  padding: 10;
  padding-right: 20;
}

希望这能给你一些想法。