javascript - 如何在 ReactJS 中动态添加行？

问题描述

我仍然是 ReactJS 的初学者，需要为我的工作构建一个动态表。

在该表中，用户可以添加新行，也可以删除任何现有行。

问题是，我不知道如何保存输入到新字段中的值。我的onChange功能不工作，我做了几个测试，但我无法保存输入的值。

这是我放入的代码codesandbox。

你能告诉我保存输入的值我做错了什么吗？先感谢您。

import React from "react";

import "./styles.css";

import List from "./List/List";

const App = () => {
  const [data, setData] = React.useState([
    [
      {
        label: "Property Name",
        field: "propertyName",
        value: ""
      },
      {
        label: "Value",
        field: "value",
        value: ""
      }
    ]
  ]);

  const handleOnChange = (field) => (e) => {
    setData((prev) => ({
      ...prev,
      [field]: e.target.value
    }));
  };

  const addRow = () => {
    setData([
      ...data,
      [
        {
          label: "Property Name",
          field: "propertyName",
          value: ""
        },
        {
          label: "Value",
          field: "value",
          value: ""
        }
      ]
    ]);
  };

  const removeRow = (index) => {
    const _data = [...data];
    _data.splice(index, 1);
    setData(_data);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <List
        data={data}
        addRow={addRow}
        removeRow={removeRow}
        handleOnChange={handleOnChange}
      />
    </div>
  );
};

export default App;

import React from "react";

import AddCircleIcon from "@material-ui/icons/AddCircle";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import TextField from "@material-ui/core/TextField";

import "./styles.scss";

const List = ({ data, handleOnChange, addRow, removeRow }) => {
  return (
    <div className="container">
      {data.map((items, index) => (
        <div key={index} className="content">
          <div className="content-row">
            {items.map((item, index) => (
              <TextField
                key={index}
                label={item.label}
                value={item.value}
                onChange={handleOnChange(index)}
                variant="outlined"
              />
            ))}
          </div>
          <div>
            <AddCircleIcon onClick={addRow} />
            {data.length > 1 && (
              <RemoveCircleIcon onClick={() => removeRow(index)} />
            )}
          </div>
        </div>
      ))}
    </div>
  );
};

export default List;

标签： javascriptreactjs

很好，你分享了代码。您的代码有几个问题。我在这个 URL 下有一个更新的代码，

https://codesandbox.io/s/reverent-mclean-hfyzs

下面是问题，

您的数据结构是一个数组数组，而您的 onchange 事件不尊重这一点。
当您更改值时，您没有可用的属性 [name/id] 来识别文本框。

我必须为每个文本框添加一个 name 属性并将其设计为 2D 数组，因此任何文本框都将具有唯一的名称。

我必须映射数据数组并找到必须更新值的节点，并将新值设置为任何文本框更改时的新状态。

我在添加一行时添加了一个 console.log，以便您可以查看当前状态。

javascript - 如何在 ReactJS 中动态添加行？

问题描述

解决方案

推荐阅读