React 中setState({key:value}) key值动态变化，如何动态设置key的值

最新推荐文章于 2024-11-24 03:15:15 发布

徐同保

最新推荐文章于 2024-11-24 03:15:15 发布

阅读量4.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React 中setState({key:value}) k

本文链接：https://blog.youkuaiyun.com/xutongbao/article/details/84874661

React 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种在React中高效管理组件状态的方法，通过两种不同的setState实现方式，展示了如何响应用户输入更新state，并在10毫秒后打印最新的状态，适用于前端开发人员提升应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种写法：

import React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      age: '',
      sex:''
    }
  } 
  handleChange(field, e) {
    this.setState({
      [field]: e.target.value
    })
    setTimeout(() => {
      console.log(this.state)
    }, 10)
  } 
  render() {
    return (
      <div>
        <input onChange={this.handleChange.bind(this, 'username')}></input>
        <input onChange={this.handleChange.bind(this, 'age')}></input>
        <input onChange={this.handleChange.bind(this, 'sex')}></input>
      </div>
    );
  }
}

export default App;

第二种写法：

import React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      age: '',
      sex:''
    }
  } 
  handleChange(field, e) {
    let data = {}
    data[field] = e.target.value
    this.setState(data)
    setTimeout(() => {
      console.log(this.state)
    }, 10)
  } 
  render() {
    return (
      <div>
        <input onChange={this.handleChange.bind(this, 'username')}></input>
        <input onChange={this.handleChange.bind(this, 'age')}></input>
        <input onChange={this.handleChange.bind(this, 'sex')}></input>
      </div>
    );
  }
}

export default App;