代码之家 › 专栏 › 技术社区 › john doe

反应绑定和填充对象

reactjs

john doe · 技术社区 · 6 年前

我有一个React组件,它维护本地状态,如下所示:

  this.state = {
      user : {}
    }

我在屏幕上有两个文本框,可以输入姓名和年龄。我从文本框发送值并在状态中填充用户对象,如下所示:

 onTextBoxChange = (e) => {

   // this.user is a property on the Component declared inside the // constructor
    this.user[e.target.name] = e.target.value

    this.setState({
      user : this.user 
    })
  }

是否有更好的方法用包含名称和年龄的用户对象填充状态。

3 回复 | 直到 6 年前

dance2die 6 年前

不需要创建额外的变量( let user =... )或成员变量( this.user ).

只需使用扩展语法覆盖以前的值。

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

这是CodeSandBox的完整工作版本。

Radix 6 年前

您可以通过以下三种不同的方式实现相同的目的:

1)不需要创建 this.user 属性,而不是通过使用局部变量来实现。因此,功能可以更改为:

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

2)如果你不使用 user 在输入文本框中声明值,然后您可以简单地使用 this.用户 属性而不是使用状态,这将导致重新呈现。然后你可以使用 this.用户 例如,当表单提交时。

3)如果你不使用 用户 在值的输入文本框中声明,然后还可以使用 React refs 例如,在表单提交时直接从元素中获取值。

-1

ardev 6 年前

您可以在父组件中尝试此操作:

onTextBoxChange = (field, value) => {
        this.setState({user:{
            ...this.state.user,
            [field]: value
        }   
        });
    }

然后在子组件中:

onNameChange = (e) => {
    this.props.onChange('name', e.target.value)
}
onAgeChange = (e) => {
    this.props.onChange('age', e.target.value)
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前