非受控组件:现用现取
// 创建组件 class Login extends React.Component{ handleSubmit = (event) => { event.preventDefault() alert(`用户名是${this.username.value},密码是${this.password.value}`) } render() { return ( <form onSubmit={this.handleSubmit}> 用户名:<input type="text" ref={c => this.username = c} name="username"/> 密码:<input type="password" ref={c => this.password = c} name="password"/> <button>登录</button> </form> ) } } ReactDOM.render(<Login/>, document.getElementById('test'))
受控组件:类似Vue的双向绑定,随着数据的变化维护到状态中
// 创建组件 class Login extends React.Component{ state = { username: '', password: '' } saveUserName = (event) => { this.setState({username: event.target.value}) } savePassword = (event) => { this.setState({password: event.target.value}) } handleSubmit = (event) => { event.preventDefault() // 阻止表单提交 const {username, password} = this.state alert(`用户名是${username},密码是${password}`) } render() { return ( <form onSubmit={this.handleSubmit}> 用户名:<input type="text" onChange={this.saveUserName} name="username"/> 密码:<input type="password" onChange={this.savePassword} name="password"/> <button>登录</button> </form> ) } } ReactDOM.render(<Login/>, document.getElementById('test'))
由于 React 官方建议 尽量少用 ref, 所以我们多写 受控组件
原文地址:https://www.cnblogs.com/bulu08042/p/15416348.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。