时间戳

首页 > 解决方案 > 在 React 中是否可以使用钩子来填充从 array.map() 生成的单个输入？

javascript - 在 React 中是否可以使用钩子来填充从 array.map() 生成的单个输入？

问题描述

考虑以下应用程序。我将如何在“输入”中存储与每个项目 ID 关联的输入，这样一旦我单击按钮，我就能够发送与我单击的按钮的项目 ID 关联的输入的信息。

是否可以将数据存储在数组中，例如我有 [{id: 123, inputvalue: "zyx"}, {id: ..., inputvalue: ...}, {id: etc., inputvalue: ETC。}]？

我将如何访问这些数据以通过使用按钮发送并用于在第三列的应用程序上呈现？

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

   export default function App () {
       const [input, setInput] = useState([]);
       const [idData, setIdData] = useState([]);

       useEffect(
         //gets id data and setIdData(response.data);
       )

       handleButton () {
           try{
               //sends data for single item
           } catch (e)) {
               alert(e)
           }

       }

       return(
           <Fragment>
               <table>
                    <tableheader>
                        <tablerow>
                            <tableheadercell>
                                 ID
                            </tableheadercell>
                            <tableheadercell>
                                 Input
                            </tableheadercell>
                            <tableheadercell>
                                 ID and Input
                            </tableheadercell>
                            <tableheadercell>

                            </tableheadercell>
                        <tablerow>
                    </tableheader>
                    <tablebody>
                        {idData.map(item => (
                            <tablerow key={item.id}>
                                <tablecell>
                                     ID
                                </tablecell>
                                <tablecell>
                                     <input... onChange(e => setInput({
                                         id: item.id, inputvalue: e.target.value}))>
                                </tablecell>
                                <tablecell>
                                     {ID and input appearing together}
                                </tablecell>
                                <tablecell>
                                     <button... onClick(() => handleButton())>
                                </tablecell>
                            <tablerow>
                        ))}
                    </tablebody>
               </table>
           </Fragment>
       );
   }

非常感谢您！

标签： javascriptreactjsreact-hooks

解决方案

  • 在 useEffect 中获取您的数据并将其存储在 state 中setIdData。
  • 将其映射并动态呈现表格行，例如：<td>{item.id}</td>
  • 维护输入状态，并在其中onChange使用 set state 回调来动态更新对象，输入键id与用户输入的值一样
  • 创建一个handleButtonfor 按钮并通过item。您可以input value轻松地从状态中检索。

您的代码已被重构。在这里查看工作演示

代码片段：

export default function App() {
  const [input, setInput] = useState({});
  const [idData, setIdData] = useState([]);

  useEffect(() => {
    // make api call and then set the state
    setIdData([{ id: 123, inputvalue: "xyz" }, { id: 234, inputvalue: "abc" }]);
  }, []);

  const handleInputChange = (e, id) => {
    const val = e.target.value;
    setInput(prev => ({ ...prev, [id]: val }));
  };

  const handleButton = item => {
    console.log(item, input[item.id]);
  };

  return (
    <Fragment>
      <table>
        <th>
          <tr>
            <td>ID</td>
            <td>Input</td>
            <td>ID and Input</td>
            <td />
          </tr>
        </th>
        <tbody>
          {idData.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>
                <input
                  onChange={e => handleInputChange(e, item.id)}
                  value={input[item.id]}
                />
              </td>
              <td>
                {/* {ID and input appearing together} */}
                {item.id + item.inputvalue}
              </td>
              <td>
                <button onClick={() => handleButton(item)}>
                  click button {item.id}
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </Fragment>
  );
}

推荐阅读