Javascript 创建动态表单

我正在尝试使用react钩子和.map（）实现一个动态表单

到目前为止，我实现的是生成静态表单，如本例所示：

这是我的静态表单：

<form className={classes.root} noValidate autoComplete="off">
      <Grid container spacing={4}>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Name" fullWidth={true} />
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Email" fullWidth={true} />
        </Grid>
        <Grid item xs={12} sm={6} md={4}>
          <TextField id="profile" label="Address" fullWidth={true} />
        </Grid>
        {/* textarea */}
        <Grid item xs={12} sm={12} md={12}>
          <TextField
            label="Info"
            multiline
            rows={1}
            rowsMax={4}
            fullWidth={true}
          />
        </Grid>
      </Grid>
    </form>

{/*textarea*/}

在这里，我试图使表单具有动态性：

const initialState = { name: "", email: "", address: "", info: "" };

export default function BasicTextFields() {

const [inputs, setInputs] = useState({ ...initialState });

return(
<form className={classes.root} noValidate autoComplete="off">
      <Grid container spacing={4}>
      {inputs.map((item, index) => (
        <Grid item xs={12} sm={6} md={4}>
          <TextField id={index`${item}`} label={item} fullWidth={true} />
        </Grid>
      )}
  </Grid>
    </form>
)}

const initialState={name:，email:，address:，info:}；
导出默认函数BasicTextFields（）{
const[inputs，setInputs]=useState（{…initialState}）；
返回(
{inputs.map（（项目，索引）=>(
)}
)}

但它是返回错误，不知道为什么，有人可以帮助我也与详细信息请。 请记住，表单的最后一个字段也是一个textarea，因此获取特定属性

---

谢谢！

我发现您的代码中有一些问题

由于您的

输入

是一个对象，您不能直接在其上使用map。我使用了

Object.keys（）

来使用

map

您的

模板中也存在一些问题

这是带有动态内容的

表单

元素

<form className={classes.root} noValidate autoComplete="off">
  <Grid container spacing={4}>
    {
      Object.keys(inputs).map((key, index) => {
        if(key === 'info') {
          return (
            <Grid item xs={12} sm={12} md={12}>
            <TextField
              label={key}
              multiline
              rows={1}
              rowsMax={4}
              fullWidth={true}
            />
            </Grid>
          )
        } else {
          return (
            <Grid item xs={12} sm={6} md={4}>
          <TextField id={`index${key}`} label={key} fullWidth={true} />
        </Grid>
          )
        }
    })
  }
  </Grid>
</form>

{
Object.keys（输入）.map（（键，索引）=>{
如果（键=='info'）{
返回(
)
}否则{
返回(
)
}
})
}

---

这是。

如果我没有错，您的

输入是一个对象，对吗？如果我有多种类型的字段，我猜每个字段的If条件都是对的？谢谢：）是的。欢迎：）