【React】获取InputItem输入框中的数据

一、效果图

 二、需求描述

     获取用户在注册时输入的信息，并弹框显示出来。

三、代码实现

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

const ListItem = List.Item

class Register extends React.Component {
    state = {
        username: '',
        password: '',
        conPassword: '',
        type: 'laoban'
    }
    handleChange = (name, val) => {
        // 更新状态
        this.setState({
            [name]: val //不是属性，是属性的值[name]
        })
    }
    register = () => {
        const {username, type} = this.state
        alert(`用户名：${username},用户类型：${type}`)
    }

    toLogin = () => {
        this.props.history.replace('/login') // 跳转到登陆页面
    }


    render() {
        const {type} = this.state
        return (
            <div>
                <NavBar>Boss直聘</NavBar>
                <Logo/>
                <WingBlank size="lg">
                    <InputItem type="text" onChange={val => {
                        this.handleChange('username', val)
                    }} placeholder="请输入用户名">用户名：</InputItem>
                    <WhiteSpace size="xs"/>
                    <InputItem type="password" onChange={val => {
                        this.handleChange('password', val)
                    }} placeholder="请输入密码">密&nbsp;&nbsp;&nbsp;码：</InputItem>
                    <WhiteSpace size="xs"/>
                    <InputItem type="password" onChange={val => {
                        this.handleChange('conPassword', val)
                    }} placeholder="请再次输入密码">确认密码：</InputItem>
                    <WhiteSpace size="xs"/>
                    <ListItem>
                        <span>用户类型：</span>
                        <Radio checked={type === 'dashen'}
                               onChange={val => this.handleChange('type', 'dashen')}
                               style={{marginLeft: "10px"}}>大神</Radio>
                        <Radio checked={type === 'laoban'}
                               onChange={val => this.handleChange('type', 'laoban')}
                               style={{marginLeft: "10px"}}>老板</Radio>
                    </ListItem>
                    <Button type="primary" onClick={this.register}>注册</Button>
                    <WhiteSpace size="xs"/>
                    <Button onClick={this.toLogin}>已有账户</Button>
                </WingBlank>
            </div>
        );
    }
}

export default Register;