更新功能组件中的嵌套数据



我有以下数据:

const INITIAL_DATA = [
{
"id": 1,
"name": "Name 1",
},
{
"id": 2,
"name": "Name 2",
}
];  

我正在使用 useState 设置INITIAL_DATA,并使用数据数组的第一项声明一个新的状态变量。

const [data, setData] = useState(INITIAL_DATA);
const [single, setSingle] = useState(data[0]);  

从列表中选择单个数据后:

{data.map(function (d, idx) {
return (
<li key={idx} onClick={() => handleOnClick(idx)}>
{d.name}
</li>
)
})}  

使用以下处理程序:

const handleOnClick = (id) => {
setSingle(data[id]);
}  

状态变量 Single 还用"name"(single.name(填充表单。
现在我尝试更新表单或输入字段"name",并使用新值更新数据集,但我卡住了。

const handleInputChange = e => {
//const { name, value } = e.target
//setValues({...values, [name]: value})
}  

这是我的输入更改处理程序。我正在设法读取该值,但我无法相应地更新嵌套数组。我需要编辑数组并使用新的和更新的数组更新数据状态变量。

首先,需要控制输入,因此通过添加文本状态,您可以使用handleInputChangesetText更新它。

接下来,onSubmit没有得到任何东西,因为输入没有register所以ref={register}被添加到输入中以获取表单数据。

接下来,我从有关在提交表单时使用状态 ID 更新数据数组的评论中获得了灵感。

这是更新的文件。对不起,我的短绒可能稍微改变了一些间距

import React, { useState } from 'react';
import { useForm } from "react-hook-form";
import CollapseSection from '../components/UI/Collapse/CollapseSection'
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
const Verbraucher = () => {
const INITIAL_DATA = [
{
"id": 1,
"name": "Test 1",
},
{
"id": 2,
"name": "Test 2",
}
];
const [data, setData] = useState(INITIAL_DATA);
const [id, setId] = useState(0);
const [text, setText] = useState(data[id].name);
// For react forms
const { register, handleSubmit } = useForm();
const onSubmit = (single) => {
const d = [...data];
d[id] = { ...single, name: single.name };
setData(d);
};
const handleOnClick = (idx) => {
setId(idx);
setText(data[idx].name);
}
const handleInputChange = e => {
const { value } = e.target;
setText(value);
}
return (
<CollapseSection
title="Test"
appear={true}
>
<Container className="sectionVerbraucher p-0 mb-3">
<Row className="no-gutters">
<Col className="col" xs={12} md={6}>
<Row className="bg-white m-0">
<Col className="p-3" xs={12} md={12}>
<form onSubmit={handleSubmit(onSubmit)}>
<h1>Test</h1>
<hr />
<input
ref={register}
name="name"
value={text}
onChange={handleInputChange}
/>
<input type="submit" />
</form>
</Col>
</Row>
</Col>
<Col className="col colSummary bg-white p-3" xs={12} md={6}>
<ul className="listAll">
{data.map(function (d, idx) {
return (
<li key={idx} onClick={() => handleOnClick(idx)}>
{d.name}
</li>
)
})}
</ul>
</Col>
</Row>
</Container>
</CollapseSection>
)
}
export default Data;

相关内容

  • 没有找到相关文章

最新更新