Question

我有一个表格，其字段格式如此

                  <Form.Field>
                    <input 
                        type="text" 
                        name="firstname" 
                        placeholder="First Name" 
                        value= { this.state.user.firstname } 
                        onChange= { this.onChange } 
                    />
                  </Form.Field>

这很好用。我的onChange事件完美地管理了这个。

 state = {
    user: { 
      firstname: "",
      lastname: ""
   }
 }

  onChange = e => {
    this.setState({
      user: { ...this.state.user, [e.target.name]: e.target.value }
     });
  }

最初，我试图从我的API返回我的JSON对象，并在名称周围嵌套了一个层次结构。

 state = {
    user: { 
     name: {
      firstname: "",
      lastname: ""
     }
   }
 }

但是当它是这样的时候，我的onChange对象会将变量添加到我的状态而不是管理现有的变量;即使事件触发，我也没有改变UI上的值。我试图通过操作form.field的名称来导航JSON层次结构以匹配JSON，但这不起作用：

                  <Form.Field>
                <input 
                    type="text" 
                    name="name.firstname" 
                    placeholder="First Name" 
                    value= { this.state.user.name.firstname } 
                    onChange= { this.onChange } 
                />
              </Form.Field>

我错过了什么？

Answer 1

您的假设很好，您无法使用以下语法导航您的JSON对象：{ [e.target.name]: e.target.value }

最简单的解决方案是使用另一个onChange函数来专门修改您的name子对象。

如果您仍然希望拥有单个函数，则应该可以解析e.target.name值并将字符串拆分为.字符，但这听起来很奇怪。

使用JSON重现表单问题

1 个答案: