基础知识-组件通信 ​

import React,{Component} from "react";
import ReactDom from 'react-dom';
<!-- 表单组件 -->
const Inputlabel = (props) => {
    return (
        <div>
            <label>{ props.label}</label>
            <input value={props.value} type={props.type} onChange={(event) => {
                props.onChange(event.target.value)
            }}></input>
        </div>
    )
}

class App extends Component {
    state = {
            name: '前端猛男',
            password:'123'
    }
    //  登录
     login = () => {
        console.log(this.state)
    }
    // 重置
    rever = () => {
        this.setState({
            name: '',
            password:''
        })
    }
    render() {
        return (
            <div>
                <Inputlabel label='用户名' type="text" value={this.state.name} onChange={(value) => {
                    this.setState({
                        name:value
                    })
                }}></Inputlabel>
                <Inputlabel label='密码' type="password" value={this.state.password} onChange={(value) => {
                     this.setState({
                        password:value
                    })
                }}></Inputlabel>

                <button onClick={this.login}>登录</button>
                <button onClick={this.rever}>重置</button>
            </div>
        )
    }
}
ReactDom.render(<App/>,document.getElementById('root'))

import React,{Component} from "react";
import ReactDom from 'react-dom';
<!-- 子组件 -->
class Inputlabel2 extends Component {
    state = {
        InputValue:''
    }
    // 清空方法
    clear = ()=> {
        this.setState({ InputValue:''})
    }
    // 设置值方法
    SetInputValue = (value) => {
        this.setState({ InputValue:value})
    }
    render() {
        return (
            <div>
                <label>{ this.props.label}</label>
                <input value={this.state.InputValue} type={this.props.type} onChange={(event) => {
                        this.setState({
                            InputValue:event.target.value
                        })
                }}></input>
            </div>
        )
    }
}
<!-- 父组件 -->
class App extends Component {
    username = React.createRef()
    password = React.createRef()

     <!-- 通过ref来调用组件内部的方法来操作组件 -->
    //  登录
    login = () => {
        this.username.current.SetInputValue('前端猛男')
        this.password.current.SetInputValue('123')
    }
    // 重置
    rever = () => {
        this.username.current.clear()
        this.password.current.clear()
    }
    render() {
        return (
            <div>
                <Inputlabel2 label='用户名' type='text' ref={this.username}></Inputlabel2>
                <Inputlabel2 label='密码' type='password' ref={this.password}></Inputlabel2>
                <button onClick={this.login}>登录</button>
                <button onClick={this.rever}>重置</button>
        </div>
        )
    }
}
ReactDom.render(<App/>,document.getElementById('root'))