如何解决列表内的React Hooks输入
美好的一天,
我正在尝试使用react钩子在列表内创建一个表单。到目前为止,我一直在苦苦挣扎,因为我只熟悉如何在单个状态下进行状态更改。
import React from "react"
export function TestApp () {
const [input,setInput] = useState("");
function submitData(){
// TODO
}
return (
<>
<input onChange={e=>setInput(e.target.value)} value={value} />
<button type="button" onClick={submitData}>Submit</button>
</>
)
}
我的示例场景是:有一个来自Web api的数据列表,我需要在列表中进行迭代。在该列表内,有一个输入,用户可以在其中输入或更新数据。下面是类似的内容,但无法正常工作。
import React from "react"
export function TestApp () {
const [customers,setCustomers] = useState([])
useEffect(()=>{
axios.get(`api/customers`).then(response => {
setCustomers(response.data)
// suppose the result will be something like:
// [{id:1,name: "James",{id: 2,name: "Josh"}]
).catch(error=>console.log(error));
},[])
const [inputs,setInputs] = useState([]);
function submitData(){
// TODO
console.log(inputs)
// something like the result will be if the user just added "updated" after the name inside the input list
[{id:1,name: "James updated",name: "Josh updated"}]
}
function handleOnChange(e,data){
setInputs(...inputs,{
id: data.id,name: data.name
})
}
return (
<>
{customers.map((data)=> (
<input onChange={e=>handleOnChange(e,data)} value={data.name} />
))};
<button type="button" onClick={submitData}>Submit</button>
</>
)
}
我想要做的是,当用户在所选行内键入内容时,它会更改数组内的更改/更新。因为inputs
中的数据是我可以用来在后端进行更改/更新的地方。
谢谢,我希望有人可以帮助我。
解决方法
映射时,获取被迭代项的当前索引,并将其传递给函数。在函数中,在该索引之前和之后对数组进行切片,并在索引本身处替换name
属性:
const changeName = (i,newName) => {
setCustomers([
...customers.slice(0,i),{ ...customers[i],name: newName },...customers.slice(i + 1)
]);
};
// ...
{customers.map((item,i)=> (
<input onChange={e => changeName(i,e.currentTarget.value)} value={item.name} />
))};
// ...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。