React中 setState({key:value})时当传入的key是一个变量，动态获取和设置state的值

拿一个注册组件为例

class Register extends Component {
  constructor(props){
    super(props)
    this.state = {
      username:'',
      password:'',
      password2:'',
      type:'求职者'
    }
  }

想通过同一个handleChange方法修改四个state属性的值，就需要动态传入属性参数，先写个错的放着，看看会怎么样

handleChange(name,val){
    this.setState({
      name:val
    })
  }

其实如果在vscode中代码中的name没有高亮，也就是说明根本没有用到，这也是一个提醒

调用

<InputItem onChange={(val)=>{this.handleChange('username',val)}} placeholder="请输入用户名">用户名:</InputItem>
<InputItem onChange={(val)=>{this.handleChange('password',val)}} type='password' placeholder="请输入密码">密码:</InputItem>

结果，提醒如下,且ajax请求也没有发出去

改变handleChange方法，通过给name加中括号

handleChange(name,val){
    this.setState({
    [name]:val
    })
  }

vscode中name高亮

请求顺利发送