javascript - 反应:为不同的输入接收相同的值
问题描述
该handleChangeUpdate
函数适用于单个输入,例如name
.
但是当添加第二个输入时description
,无论输入name
或description
输入,两个输入都会收到相同的值。
如何让每个输入都收到它自己的价值?
const F = () => {
const initialList = [
{
id: "a",
name: "John",
description: "1as23"
},
{
id: "b",
name: "Eric",
description: "12ce3"
},
{
id: "c",
name: "Jonathan",
description: "12vt3"
},
];
const [list, setList] = React.useState(initialList);
const [name, setName] = React.useState("");
const [description, setDescription] = React.useState("");
function handleChangeUpdate(id, value, description) {
const newList = list.map((item) => {
if (item.id === id) {
const updatedItem = {
...item,
name: value,
description: value
};
return updatedItem;
}
return item;
});
setList(newList);
console.log(newList);
}
return (
<div>
<ul >
<div>
{list.map((item) => (
<li key={item.id}>
<input className="form-control" onChange={(e)=> handleChangeUpdate(item.id, e.target.name)} defaultValue={item.name}></input>
<input className="form-control" onChange={(e)=> handleChangeUpdate(item.id, e.target.description)} defaultValue={item.description}></input>
</li>
))}
</div>
</ul>
</div>
);
};
ReactDOM.render(<F />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
解决方案
推荐阅读
- javascript - 使用 JavaScript 数组填充具有设定时间的选择选项?
- python - 如何将 tf.Variable 转换为 numpy?
- matlab - 使用按钮单击中断循环 Appdesigner GUI [在调试模式下工作但不在正常模式下工作] [绘图和按钮都具有不同的功能]
- python - 在python中获取字符串值的正则表达式
- python - 如何将 Tkinter 8.6.8 升级到 8.6.9?
- reactjs - React route:如何从组件中获取当前的route key
- javascript - 即使窗口屏幕大小为
- c# - 从 .Net Core 中的启动配置方法调用控制器操作
- iso - 为 post-fd 操作系统(例如 CentOS 8)生成 kickstart ISO 并在打包程序 vsphere-iso 调用中使用它
- laravel - Laravel 8x 使用 JetStream Teams 创建用户表