处理使用 map 函数呈现的多个输入框 javascript

Question

我正在做一个反应，我正在处理动态数量的输入字段，因为我正在使用 arr.map 函数渲染它们。但是输入onChange方法有那么多输入框，如何处理呢？

这是我的组件：

this.props.setsList.map((codeset, index) => (
     <Table.Row key={codeset.code_system_id}>
       <Table.Cell>{index + 1}</Table.Cell>
       <Table.Cell>{codeset.name}</Table.Cell>
       <Table.Cell>
         <Input
           type='text'
           className='form-control'
           value={codeset.code}
           placeholder={translateText('Code')}
           onChange={() => this.handleCodeChange(event, index)}
           style={{ height: '70%' }}
         />
       </Table.Cell>
       <Table.Cell>
         <Input
           type='text'
           className='form-control'
           value={codeset.description}
           placeholder={translateText('Code Description')}
           onChange={() => this.handleCodeDescriptionChange(event, index)}
           style={{ height: '70%' }}
         />
       </Table.Cell>
     </Table.Row>

所有输入字段都可能有现有字段或可能为空，并且可以将其编辑，将编辑字段发送到 API。我怎么能只用 1 handleFunction 来处理这种情况呢？有办法吗？任何线索将不胜感激。

在上面的代码中，有 2 个输入框，初始值来自 api。

Answer 1

传入组件的数据应直接进入状态。然后每个字段将数组索引、字段名称和新值发送到 handleChange 回调。

import { useState } from "react";

// passed in as a prop from the parent component
const data = [
  {
    name: "foo",
    code: "gdfgsd"
  },
  {
    name: "bar",
    code: "gfdsgsdfgfd"
  }
];

const App = ({ setsList = data }) => {
  const [state, setState] = useState(setsList);

  const handleChange = (e, i) => {
    const { value, name } = e.target;

    const newState = [...state];
    newState[i] = {
      ...newState[i],
      [name]: value
    };

    console.log(newState);
    setState(newState);
  };

  return (
    <div className="App">
      {state.map(({ name, code }, index) => {
        return (
          <div key={index}>
            <label>
              name
              {":  "}
              <input
                name="name"
                value={name}
                onChange={(e) => handleChange(e, index)}
              />
            </label>
            <label>
              code
              {":  "}
              <input
                name="code"
                value={code}
                onChange={(e) => handleChange(e, index)}
              />
            </label>
          </div>
        );
      })}
    </div>
  );
};

export default App;

还有一种方法可以动态呈现每个字段，方法是在数组上进行映射，然后在该数组项的键上进行内部映射。

import { useState } from "react";
import { data } from "./data";

const App = ({ setsList = data }) => {
  const [state, setState] = useState(setsList);

  const handleChange = (e, i) => {
    const { value, name } = e.target;
    const newState = [...state];
    newState[i] = {
      ...newState[i],
      [name]: value
    };
    console.log(newState);
    setState(newState);
  };

  return (
    <table className="App">
      <tbody>
        {state.map((item, index) => (
          <tr key={index}>
            {Object.keys(item).map((key) => (
              <td key={`${index}-${key}`}>
                <label>
                  {key}
                  {":  "}
                  <input
                    name={key}
                    value={item[key]}
                    onChange={(e) => handleChange(e, index)}
                  />
                </label>
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default App;

处理使用 map 函数呈现的多个输入框 javascript

Handle multiple input boxes rendered using map function javascript

javascript

input

reactjs