React自定义LoginView

最新推荐文章于 2023-02-03 14:06:55 发布

--风起云涌--

最新推荐文章于 2023-02-03 14:06:55 发布

阅读量313

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/NLYNN/article/details/88974267

版权

前端开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

React自定义LoginView(登录界面)

先看效果

需求: 点击登录按钮, 把两个输入框的值传递到父组件

LoginView组件

import React, {Component} from 'react'
import {Input, Button} from 'antd';
export default class LoginView extends Component{
  constructor(props){
    super(props)
    this.state = {
      mobile: '',
      pwd: '',
    }
  }

  mobileChange = (event) => {
    console.log(event.target.value)
    this.setState({
      mobile: event.target.value
    })
  }
  pwdChange = (event) =>{
    this.setState({
      pwd: event.target.value
    })
  }
  render() {
    return (
      <div style={{display: 'flex', alignItems:'center', flexDirection: 'column', width: 200}}>
        <Input onChange={this.mobileChange} placeholder='手机号' style={{marginBottom: 10}}/>
        <Input onChange={this.pwdChange} placeholder='密码' type='password' />
        <Button
          style={{marginTop: 20}}
          type="primary"
          onClick={() => this.props.loginClick({mobile: this.state.mobile, pwd: this.state.pwd})}
        >
          登录
        </Button>
      </div>
    )
  }
}

App父组件

import React from 'react'
import LoginView from '../../components/LoginView'

export default class App extends React.Component{

  onLoginClick = ({mobile, pwd}) => {
    console.log(mobile)
    console.log(pwd)
  }

  render() {
    return (
      <div style={{marginLeft: 20, marginRight: 20}}>
        <LoginView loginClick={this.onLoginClick}/>
      </div>
    )
  }
}