zoukankan      html  css  js  c++  java
  • 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;
    
  • 相关阅读:
    bzoj2115: [Wc2011] Xor
    bzoj2844: albus就是要第一个出场
    hdu3949
    bzoj2487: Super Poker II
    bzoj3456: 城市规划
    bzoj3992: [SDOI2015]序列统计
    ubuntu 使用命令行登录oracle
    ubuntu安装docker
    linux查询硬件信息
    ubuntu oracle 环境搭建
  • 原文地址:https://www.cnblogs.com/xutongbao/p/11915727.html
Copyright © 2011-2022 走看看