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

本文主要是介绍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.stateconsole.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'))

这篇关于React 学习笔记 —— 非受控组件与受控组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---