React 处理form表单input输入项双向数据绑定

import React, { Component } from 'react';
import Logo from '../../components/logo/logo'
import { WingBlank, WhiteSpace, List, InputItem, Button, Radio } from 'antd-mobile';

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            type: 'people',
            user: '',
            pwd: '',
            type: 'people',
            checkPwd: ''
        }
    }
    login() {
        this.props.history.push('/login')
    }
    handleChange(key, val) {
        console.log(key, val)
        this.setState({
            [key]: val
        })
    }
    handleRegister() {
        console.log(this.state)
    }
    render() {
        const RadioItem = Radio.RadioItem;
        return (
            <div>
                <Logo></Logo>
                <div>
                    <WhiteSpace size="lg" />
                    <WingBlank>
                        <InputItem onChange={val => this.handleChange('user', val)} >用户名</InputItem>

                        <WhiteSpace size="lg" />

                        <InputItem onChange={val => this.handleChange('pwd', val)} type="password">密码</InputItem>
                        <WhiteSpace size="lg" />
                        <InputItem type="password" onChange={val => this.handleChange('checkPwd', val)} >确认密码</InputItem>
                        <WhiteSpace size="lg" />
                        <RadioItem checked={this.state.type === 'people'} onClick={() => this.handleChange('type', 'people')}>牛人</RadioItem>
                        <RadioItem checked={this.state.type === 'boss'} onClick={() => this.handleChange('type', 'boss')}>boss</RadioItem>
                        <WhiteSpace size="lg" />
                        <Button type="primary" size="small" onClick={() => this.handleRegister()}>注册</Button>
                        <WhiteSpace size="lg" />

                        <Button type="primary" size="small" onClick={() => this.login()}>登陆</Button>

                    </WingBlank>



                </div>
            </div >
        );
    }
}

export default Register;

双向数据的核心绑定：

this.state = {
            type: 'people',
            user: '',
            pwd: '',
            type: 'people',
            checkPwd: ''
        }
        
  this.setState({
            [key]: val
        })

input的onChange传递的值需要与state中的key一致