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;
    
  • 相关阅读:
    C语言(1)
    ​ Markdown
    多功能嵌入式解码软件(4)
    多功能嵌入式解码软件(3)
    多功能嵌入式解码软件(2)
    STM32最小系统设计
    C#通过字符串分割字符串Split
    基于串口的SD_card系统
    直流无刷电机工作原理
    Java常用函数式接口--Consumer接口使用案例
  • 原文地址:https://www.cnblogs.com/xutongbao/p/11915727.html
Copyright © 2011-2022 走看看