时间戳

首页 > 解决方案 > 如何将此 JSX 表转换为输入文件？

javascript - 如何将此 JSX 表转换为输入文件？

问题描述

我如何将其转换为一堆输入而不是表格？我知道该片段是不可运行的顺便说一句。如果有人可以给我一个入门或更多指导，我会像这样感激它： 在此处输入图像描述

function MyTable(props) {
  console.log(props);
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" },
    { id: 4, name: "rice", quantitiy: 10, location: "pantry" }
  ];
  const [state, setState] = React.useState(initState);

  return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable staff={"hello"} />, document.getElementById("target"));

标签： javascriptreactjs

解决方案

循环中的val变量state.map应该是您需要的值，item例如，您也可以使用对上面对象的引用来给它一个特定的名称。

尝试替换<td>{val}</td>为：

<td>
  <input type="text" value={val} name={item.name}>
</td>

这应该有助于作为一个起点。

推荐阅读