时间戳

首页 > 解决方案 > 用 JSON 反应表单问题

reactjs - 用 JSON 反应表单问题

问题描述

我有一个格式像这样的字段的表单

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

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

 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>

我错过了什么？

标签： reactjs

解决方案

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

最简单的解决方案是使用onChange专门修改您的name子对象的不同功能。

如果您仍然想要一个函数，应该可以解析e.target.name值并将字符串拆分为.字符，但这对我来说听起来很奇怪。

推荐阅读