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


     第一种写法:

    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;
    
  • 相关阅读:
    一些常用的代码规范
    策略模式学习,使用go实现策略模式
    数据库作业3:第二章课后题
    数据库作业4:SQL练习1
    对数据库相关的概念自己的理解
    SQL server的初步使用
    对于高德地图SDK的开发使用
    滑稽(好像会动)!
    羊车门作业
    对Python课的看法
  • 原文地址:https://www.cnblogs.com/xutongbao/p/11915727.html
Copyright © 2020-2023  润新知