如何使用映射、键和 ID 创建一个只有一个输入标签但有多个输入字段的表单答案

【问题标题】：How to make a form with just one input tag but multiple input fields with the use of map, keys and id如何使用映射、键和 ID 创建一个只有一个输入标签但有多个输入字段的表单
【发布时间】：2022-12-17 20:57:08
【问题描述】：

我使用 useState 使用此代码创建了一个表单。但问题是我想用较少的行制作代码，我想使用键和 ID 创建它，这些键和 ID 在代码中只使用一个输入标签而不是多个输入标签。代码如下：

import './App.css';
import { useState } from "react";
function App() {

 const [inputFields, setInputFields] = useState([
  {
    name:'',
    email:'',
    username:'',
    password:'',
    confirm:'',
    mobile:''
 }
])



 const handelFormChange = (index, event) => {
  let data = [...inputFields]
  data[index][event.target.name] = event.target.value;
  setInputFields(data);
}


 const submit = (e) => { 
  e.preventDefault();
  console.log(inputFields)
} 


  return (
    <div className="App">
      <form className="bg-light" onSubmit={submit}>
        {/* <div className="form-group"> */}
        {inputFields.map((input, index) => {
        return(
        <div key={index} className="form-group"> 
          <label className="font-weight-regular"> Name </label>
          <input type="name" name='name' required value={input.name} onChange={event => handelFormChange(index,event)}></input>

          <label className="font-weight-regular"> Email </label>
          <input type="text" name='email' required value={input.email} onChange={event => handelFormChange(index,event)}></input>

          <label className="font-weight-regular"> Username </label>
          <input type="text" name='username' required value={input.username} onChange={event => handelFormChange(index,event)}></input>

          <label className="font-weight-regular"> Password </label>
          <input type="password" name='password' required value={input.password} onChange={event => handelFormChange(index,event)}></input>

          <label className="font-weight-regular"> Confirm Password </label>
          <input type="password" name='confirm' required value={input.confirm} onChange={event => handelFormChange(index,event)}></input>

          <label className="font-weight-regular"> Mobile Number </label>
          <input type="text" name='mobile' required value={input.mobile} onChange={event => handelFormChange(index,event)}></input>
        </div>
        )
        })}

        <button onClick={submit}>Submit</button>
      </form>
    </div>
  )
}

export default App;

所以我试着提到制作表格，我是这个领域的新手，所以我不知道如何制作带有单个输入字段的表格，但我有这段代码的要求

【问题讨论】：

标签： javascript arrays forms react-hooks array.prototype.map

【解决方案1】：

通过在输入字段上使用“名称”属性，可以使用单个输入字段创建具有多个输入的表单。 name 属性允许您在提交表单时识别数据来自哪个输入字段。

【讨论】：