Javascript 反应：改变单独输入的值

我有一个使用React创建的简单列表，它使用API显示数据

我正在使用axios来获取和更新数据

更新列表中特定元素的数据时，每个输入都变为空，只有活动输入注册到数据库。

它在数据库中的外观示例：

挂钩：

const [links, setLinks] = React.useState([]); // List for Links
const [title, setTitle] = React.useState(""); // Title of a link in Links
const [description, setDescription] = React.useState(""); // Description of a link in Links

更新功能：

function handleChangeUpdateLinks(id, event) {
    const { name, value } = event.target;
    const newLinks = links.map((url) => {
        if (url.id === id) {
            const updatedUrl = {
                ...url,
                [name]: value,
            };

            return updatedUrl;
        }
        return url;
    });

    setLinks(newLinks);
    
    const info = {
      
        title : value, 
        description: value,
    };

    axios
        .put("http://localhost:8000/api/link/" + id, info)
        .then((res) => {
            console.log(res);
            console.log("LINKS successfully updated");
        })
        .catch((error) => {
            console.log(error);
        });

    console.log(newLinks);
}

Onchange

为每个输入循环事件，以便更新：

 onChange={(event) => handleChangeUpdateLinks(url.id,event)}

如果删除axios功能，控制台中返回的新阵列将正确显示更新的输入

---

如何在不更改其他输入的情况下针对特定输入单独进行更新？

我建议您为每个输入创建一个单独的专用组件，以防止其他输入反映您正在变化的当前输入值的值。另外，我建议您在提交表单时更新数据，因为您正在用不同的值更新两个属性

// Parent component

function ParentComponent() {
    const [links, setLinks] = useState([])

    function updateCurrentLink(id, name, value) {
        setLinks(current => {
            const updated = current.map(url => {
                if (url.id === id) {
                    return {
                        ...url,
                        [name]: value
                    }
                },

                return url
            })

            return updated
        })
    }

    return (
        <div>
            {links.map(link => (
                <Input key={link.id} updateEvent={updateCurrentLink} {...link} />
            ))}
        </div>
    )
}

//父组件
函数ParentComponent（）{
const[links，setLinks]=useState（[]）
函数updateCurrentLink（id、名称、值）{
设置链接（当前=>{
const updated=current.map（url=>{
如果（url.id==id）{
返回{
…url，
[名称]：值
}
},
返回url
})
返回更新
})
}
返回(
{links.map（link=>(
))}
)
}

//Input.js
功能输入（道具）{
const[title，setTitle]=useState（props.title）
const[description，setDescription]=useState（props.description）
函数updateTitle（事件）{
setTitle（event.target.value）
}
函数更新描述（事件）{
setDescription（event.target.value）
}
功能提交（事件）{
event.preventDefault（）
常数信息={
标题
描述
}
props.updateEvent（props.id，'title'，title）
props.updateEvent（props.id，'description'，description）
轴心http://localhost:8000/api/link/“+id，信息）
。然后（res=>{
console.log（res）
})
.catch（错误=>{
console.log（错误）
})
}
返回(
)
}

我建议您只为每个输入创建一个单独的组件，以防止其他输入反映您正在变化的当前输入值的值。另外，我建议您在提交表单时更新数据，因为您正在用不同的值更新两个属性

// Parent component

function ParentComponent() {
    const [links, setLinks] = useState([])

    function updateCurrentLink(id, name, value) {
        setLinks(current => {
            const updated = current.map(url => {
                if (url.id === id) {
                    return {
                        ...url,
                        [name]: value
                    }
                },

                return url
            })

            return updated
        })
    }

    return (
        <div>
            {links.map(link => (
                <Input key={link.id} updateEvent={updateCurrentLink} {...link} />
            ))}
        </div>
    )
}

//父组件
函数ParentComponent（）{
const[links，setLinks]=useState（[]）
函数updateCurrentLink（id、名称、值）{
设置链接（当前=>{
const updated=current.map（url=>{
如果（url.id==id）{
返回{
…url，
[名称]：值
}
},
返回url
})
返回更新
})
}
返回(
{links.map（link=>(
))}
)
}

//Input.js
功能输入（道具）{
const[title，setTitle]=useState（props.title）
const[description，setDescription]=useState（props.description）
函数updateTitle（事件）{
setTitle（event.target.value）
}
函数更新描述（事件）{
setDescription（event.target.value）
}
功能提交（事件）{
event.preventDefault（）
常数信息={
标题
描述
}
props.updateEvent（props.id，'title'，title）
props.updateEvent（props.id，'description'，description）
轴心http://localhost:8000/api/link/“+id，信息）
。然后（res=>{
console.log（res）
})
.catch（错误=>{
console.log（错误）
})
}
返回(
)
}

您应该将您的信息对象置于

     const [info, setInfo] = useState({ title: "", description: "" });

更新信息

    if(name === "title") {
      setInfo({(prev) => ({ ...prev, title: value })});
    }
     if(name === "description") {
       setInfo({(prev) => ({ ...prev, description: value })});
    }

---

您应该将信息对象置于一种状态

     const [info, setInfo] = useState({ title: "", description: "" });

更新信息

    if(name === "title") {
      setInfo({(prev) => ({ ...prev, title: value })});
    }
     if(name === "description") {
       setInfo({(prev) => ({ ...prev, description: value })});
    }

---

你的意思是，每当你在一个输入上键入，例如“Hello World”，其他输入也会有相同的值？@jstarnate是，但只在前端。刷新页面并检查数据库后，只有该输入已满，其他输入为空。如果是这样，那么您的后端代码一定有问题。@jstarnate-Hmm我不这么认为。如果我只想编辑一种类型的输入，比如说

title

，我会编辑

title:value

，它会注册到数据库中。但是当输入多个输入时，它就不起作用了。你的意思是，每当你在一个输入上键入，例如“Hello World”，其他输入也会有相同的值？@jstarnate是的，但只在前端。刷新页面并检查数据库后，只有该输入已满，其他输入为空。如果是这样，那么您的后端代码一定有问题。@jstarnate-Hmm我不这么认为。如果我只想编辑一种类型的输入，比如说

title

，我会编辑

title:value

，它会注册到数据库中。但是当输入多个输入时，它就不起作用了。只是因为一些输入错误而编辑了我的答案。你完全正确。提交文件应分开，而不是每次更改。稍后我将尝试修改您提供的代码。但到目前为止，我理解你的逻辑，我同意。非常感谢。由于一些拼写错误，刚刚编辑了我的答案。你完全正确。提交的材料应分开