0

我有以下数据： 

    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 还使用“名称”(single.name) 填充表单。
现在我尝试更新表单或输入字段“名称”，并使用新值更新数据集，但我被卡住了。 

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

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

4

1 回答 1

0

首先需要控制输入，因此通过添加文本状态，您可以使用handleInputChangeand对其进行更新setText。

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

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

这是更新的文件。抱歉，我的 linter 可能稍微改变了一些间距

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;
于 2020-06-19T16:43:42.790 回答