enter image description here

import React, { useEffect, useState } from "react";

export default function App() {
  const items = [
    { store: { name: "store a", id: 0 }, months: ["june", "july"] },
    { store: { name: "store b", id: 2 }, months: ["agust", "septm"] },
    { store: { name: "store c", id: 3 }, months: ["novem", "decemb"] },
  ];

  return (
    <table>
      {items.map((item, index) => {
        const storeName = item.store.name;
        return (
          <tr key={item.store.id}>
            <th>{storeName}</th>
            {item.months.map((month, i) => (
              <td>
                <input type="text" />
              </td>
            ))}
            <td style={{ width: "100px" }}>total:</td>
          </tr>
        );
      })}
    </table>
  );
}

我想实现这个UI,并在每一行中显示输入的总和 我应该如何实现它的功能?

推荐答案

import React, { useEffect, useState } from "react";

export default function App() {
  const [inputData, setInputData] = useState(null);
  const items = [
    { store: { name: "store a", id: 0 }, months: ["june", "july"] },
    { store: { name: "store b", id: 2 }, months: ["agust", "septm"] },
    { store: { name: "store c", id: 3 }, months: ["novem", "decemb"] },
  ];
  useEffect(() => {
    let data = {};
    items.forEach((item) => {
      data = { ...data, [item.store.name]: [] };
    });
    setInputData(data);
  }, []);
  function getSum(total, num) {
    return total + Number(num);
  }
  
  return (
    <table>
      {inputData &&
        items.map((item, index) => {
          const storeName = item.store.name;
          return (
            <tr key={item.store.id}>
              <th>{storeName}</th>
              {item.months.map((month, i) => (
                <td>
                  <input
                    type="text"
                    value={inputData && inputData[items[index].store.name][i]}
                    onChange={(e) => {
                      let montData = [...inputData[storeName]];
                      montData[i] = e.target.value;
                      setInputData({
                        ...inputData,
                        [storeName]: montData,
                      });
                    }}
                  />
                </td>
              ))}
              <td style={{ width: "100px" }}>
                total: {inputData[storeName].reduce(getSum, 0)}
              </td>
            </tr>
          );
        })}
    </table>
  );
}

https://codesandbox.io/s/blissful-neco-xc8ury

Javascript相关问答推荐

模块与独立组件

调用removeEvents不起作用

如何修复(或忽略)HTML模板中的TypeScript错误?'

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

setcallback是什么时候放到macrotask队列上的?

扩展类型的联合被解析为基类型

Use Location位置成员在HashRouter内为空

同一类的所有div';S的模式窗口

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

Node.js错误: node 不可单击或不是元素

重新呈现-react -筛选数据过多

P5JS-绘制不重叠的圆

JavaScript -复制到剪贴板在Windows计算机上无效

在HTML5画布上下文中使用putImageData时,重载解析失败

调用特定数组索引时,为什么类型脚本不判断未定义

我如何才能让p5.js在不使用实例模式的情况下工作?

如何将值从后端传递到前端

是否在图表中计算线上的点坐标?

React rebuild c不会触发rerender

如何在Angular中分离桌面和移动页面并延迟加载每个页面?