灵活使用受控组件和非受控组件

收集表单数据
import React,{ Component } from 'react'
    export default class Inputone extends Component{
        constructor(props){
            super(props)
            // 初始化状态
            this.state = {
                pwd: ''
            }
              this.handleSubmit = this.handleSubmit.bind(this) 
             this.handleChange = this.handleChange.bind(this)
        }
        handleSubmit(event){
            const name=this.nameInput.value
            alert(`准备提交的用户名${name},密码为${pwd}`)
            // 组件默认行为
            event.preventDefault()
        }
        handleChange (event){
            const name=this.nameInput.value或者const { value } = this.nameInput
            // 读取输入的值
            const pwd = event.target.value
            // 更新pwd的状态
             this.setState=({pwd})
        }
        render(){
            return (
                <form action="/text" onSubmit={this.handleSubmit}
                    // 通过ref来获取表单的value
                    // input是参数
                    用户名:<input type="text" ref={input=>this.nameInput=input}/>
                    // 原生input的onChange是在失去焦点的时候触发
                    密码: <input type="password" 
                           value={this.state.pwd} 
                           onChange={this.handleChange}
                    />
                    <input type="submit" value="登入"/>
                </form>
            )
        }
    } 
    React.Dom(<LoginForm/>,document.getElementById('example'))
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页