Reactjs 如何处理数组中的窗体对象以添加列表

当我创建一个数组并将对象放入数组时，我遇到了一个问题，当我创建handleform函数时，字段不能键入，只返回null，我不知道为什么，我也遵循stackoverflow上guy的指示

this.state = {
            post : [],
            isChecked : false,
            list : [],
            object : {
                email : '',
                password : ''
            }

        }

真菌成分

<Form onSubmit={handleSubmit}>
                { 
                  list.map(h => (
                    <FormGroup key = "i">
                    <FormGroup >
                      <Label for="email">Email</Label>
                      <Input onChange={handleForm} value={h.email} type="email"  name = "email" className="form-control" placeholder="Email" required="" />
                    </FormGroup>
                    <FormGroup >
                      <Label htmlFor="password">Password</Label>
                      <Input onChange={handleForm} value={h.password} type="password"  name = "password" className="form-control" placeholder="Password" required="" />
                    </FormGroup> 
                    </FormGroup>
                ))}                   

                  <FormGroup>
                  <ButtonAntd type="primary" className="text right" onClick={handleAdd}>+</ButtonAntd>{' '}
                  </FormGroup>
                 <FormGroup >
                    <label> 
                        <input type="checkbox" checked={isChecked} onChange = {toggleChange} value="isChecked"/>{' '}
                         Anda yakin, Data anda sudah benar ?
                    </label>
                 </FormGroup>
                      <ButtonAntd type="primary" htmlType="submit" >Submit</ButtonAntd> {' '}
                      <ButtonAntd type="danger" onClick={handleBatal} >Batal</ButtonAntd>
                </Form>

{ 
list.map（h=>(
电子邮件
密码
))}                   
+{' '}
{' '}
安达·亚金，数据安达·苏达·贝纳？
提交{'}
巴塔尔

---

您缺少此处的关键因素处理更改应用于状态和表单字段上的

对象，而不是列表中的值，因此要解决此问题，您需要为每个列表对象提供一个id，然后在发生更改时，使用id更新匹配对象并更新其字段：

从“shortid”导入shortid
//这里是您的其余代码
handleForm=（{target:{name，value，id}}）=>{
const newList=list.map（obj=>{
if（obj.id==id）
返回{…obj[name]：value}
返回obj
})
这是我的国家({
列表：新列表
})
}
引线D=（e）=>{
这是我的国家({
名单：[
…这个.state.list，
{
…此.state.object，
id:shortid.generate（）
}]
})
}

注:
您可以采用另一种方法来更新数据，但需要为每个新组件创建一个本地状态，但是，这应该可以正常工作

我应该npm安装shordid？但是没有shortid有什么办法可以实现吗？圣母啊，我错过了tho，在我返回obj之前，但是页面还没有呈现，所以我输入的输入仍然错误，然后我删除了obj。哈哈。非常感谢你。欢迎你，我很高兴再次听到这么多的感谢，我必须尝试更多，再次感谢^^
<Form onSubmit={handleSubmit}>
                { 
                  list.map(h => (
                    <FormGroup key = "i">
                    <FormGroup >
                      <Label for="email">Email</Label>
                      <Input onChange={handleForm} value={h.email} type="email"  name = "email" className="form-control" placeholder="Email" required="" />
                    </FormGroup>
                    <FormGroup >
                      <Label htmlFor="password">Password</Label>
                      <Input onChange={handleForm} value={h.password} type="password"  name = "password" className="form-control" placeholder="Password" required="" />
                    </FormGroup> 
                    </FormGroup>
                ))}                   

                  <FormGroup>
                  <ButtonAntd type="primary" className="text right" onClick={handleAdd}>+</ButtonAntd>{' '}
                  </FormGroup>
                 <FormGroup >
                    <label> 
                        <input type="checkbox" checked={isChecked} onChange = {toggleChange} value="isChecked"/>{' '}
                         Anda yakin, Data anda sudah benar ?
                    </label>
                 </FormGroup>
                      <ButtonAntd type="primary" htmlType="submit" >Submit</ButtonAntd> {' '}
                      <ButtonAntd type="danger" onClick={handleBatal} >Batal</ButtonAntd>
                </Form>