React 学习笔记 —— 非受控组件与受控组件

非受控组件

• 即未对数据进行收集，现用现取

class Demo extends React.Component {
    handleClick = ()=>{
    	// 现用现取，当事件触发时，再在回调函数中获取输入框中的值
        console.log("账号：" + this.account.value)
        console.log("密码：" + this.password.value)
    }
    render () {
        return (
            <div>
                账号：<input ref={c=>this.account=c} type="text" />
                密码：<input ref={c=>this.password=c} type="password" />
                <button onClick={this.handleClick}>登录</button>
            </div>
            
        )
    }
}

ReactDOM.render(<Demo />, document.getElementById('app'))

受控组件

• 组件的数据被收集在state中，任何改变都会更新state中的数据，类似 Vue 中的 v-model

class Demo extends React.Component {
	// 收集表单数据
    state = {
        account: '',
        password: ''
    }
    collectAccount = (e) => {
        this.setState({
            account: e.target.value
        })
    }
    collectPassword = (e) => {
        this.setState({
            password: e.target.value
        })
    }
    // 直接从state中获取收集的数据
    handleClick = ()=>{
        const {account, password} = this.state
        console.log("账号：" + account)
        console.log("密码：" + password)
    }
    render () {
        return (
            <div>
                账号：<input onChange={this.collectAccount} type="text" />
                密码：<input onChange={this.collectPassword} type="password" />
                <button onClick={this.handleClick}>登录</button>
            </div>
            
        )
    }
}
ReactDOM.render(<Demo />, document.getElementById('app'))