我有以下数据:
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})
}
这是我的输入更改处理程序。我正在设法读取该值,但我无法相应地更新嵌套数组。我需要编辑数组并使用新的和更新的数组更新数据状态变量。
首先,需要控制输入,因此通过添加文本状态,您可以使用handleInputChange
和setText
更新它。
接下来,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;