javascript - 创建 React 动态表单

Question

我正在尝试使用 React hooks 和 .map(); 实现动态表单；

到目前为止，我所取得的成就是生成静态表单，如下例所示: https://codesandbox.io/s/material-demo-ndh9q

这是我的静态表单:

<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>

这里我试图使表单动态化:

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>
)}

但它返回错误，不知道为什么，有人可以帮助我提供详细信息吗？ 请记住，表单的最后一个字段也是文本区域，因此会获得特定的属性。

谢谢!

Answer 1

我发现您的代码存在一些问题。

1. 由于您的输入是一个对象，因此您无法直接在其上使用 map 。我使用 Object.keys() 来使用 map。
2. 您的模板文字中也存在一些问题。

这是包含动态内容的 form 元素。

<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>

这是codesandbox_link .