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

我有一个映射了对象的输入框

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

import React，{useState}来自“React”；
从“图标”导入管理员
//更多进口
导出默认函数InputCom（）{
const[value，setValue]=useState（“”）；
常数数据=[
{标签：“第一”，名称：“第一”}，
{标签：“last”，名称：“last”}，
{标签：“电话”，名称：“电话”}，
];
常量handleChange=（事件）=>{
设置值（event.target.value）；
};
常量handleClick=（）=>{
控制台日志（vlaue）
}
返回(
{data.map（（项，键）=>(
))}
提交
);
}

您可以创建一个名为

InputWithIcon

的组件，它扩展了一个普通的

标记，但也添加了图标。然后传递可选的

图标

道具，使其仅在提供图标时呈现图标：

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

---

希望这能给你一个想法。

你说的“输入应该显示一个图标”是什么意思？输入是文本字段。如果你需要一个图标，你可以把一些模板代码放在

{showIcon？：null}

或其他地方，并适当地设置渲染逻辑值。我已经在我的输入框中放置了css和图标，但我希望如果有人使用输入框更新值，那么只有那个特定的输入框应该在其中显示图标`我已经在我的输入框中放置了css和图标，但是我想如果有人使用输入框更新值，那么只有那个特定的输入框应该在里面显示图标`这就是我在回答的顶部所描述的。使用输入的值设置状态，仅当值不为空时才呈现图标。这样，我的管理员图标将反映在所有输入字段中，并且在提交这些值后，管理员图标将在页面重新加载（仅在更新的输入字段中）后以任何方式显示。如果您希望在提交这些值后保持该图标，您可以在提交后设置状态。如果您希望它在页面重新加载后工作，则应该全局保存该状态。使用redux或上下文API或localStorage或API。

<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;
}