非受控的表单域组件：

import React, { Component } from 'react'
class Filed extends Component {
    state = {
        value:''
    }
    render() {
        return (
            <div style={{ background: "yellow" }}>
                <label>{this.props.label}</label>
                <input type={this.props.type} onChange={
                    (e) => {
                        this.setState({ value: e.target.value })
                    }
                } value={this.state.value}/>
            </div>
        )
    }
    clear() {
        this.setState({ value: '' })
    }
}
export default class App extends Component {
   username=React.createRef();
   password=React.createRef();
    render() {
        return (
            <div>
                <h1>登录页面</h1>
                <Filed label="用户名" type="text" ref={this.username}/>
                <Filed label="密码" type="password" ref={this.password}/>
                <button onClick={() => {
                  console.log(this.username.current.state.value)
                  console.log(this.password.current.state.value)
                }}>登录</button>
                <button onClick={() => {
                    this.username.current.clear()
                    this.password.current.clear()
                }}>取消</button>
            </div>
        )
    }
}

非受控的表单域组件：

import React, { Component } from 'react'
class Field extends Component{
    render(){
        return <div style={{background:"yellow"}}>
            <label>{this.props.label}</label>
            <input type={this.props.type} onChange={(evt)=>{
                // console.log(evt.target.value)

                this.props.onChangeEvent(evt.target.value)
            }} value={this.props.value}/>
        </div>
    }
}

export default class App extends Component {
    state = {
        username:localStorage.getItem("username"),
        password:""
    }
    render() {
        return (
            <div>
                <h1>登录页面</h1>

                <Field label="用户名" type="text" onChangeEvent={(value)=>{
                    // console.log(value)

                    this.setState({
                        username:value
                    })
                }} value={this.state.username}/>
                <Field label="密码" type="password" onChangeEvent={(value)=>{
                    
                    this.setState({
                        password:value
                    })
                }} value={this.state.password}/>

                <button onClick={()=>{
                    console.log(this.state.username,this.state.password,'发送后端验证')
                }}>登录</button>
                <button onClick={()=>{
                    this.setState({
                        username:"",
                        password:""
                    })
                }}>取消</button>
            </div>
        )
    }
}