您现在的位置是:首页 > Javascript
当前栏目
React--11: refs与事件处理非受控组件和受控组件
2023-02-25 18:16:22 时间
这是我参与8月更文挑战的第18天,活动详情查看:8月更文挑战
1. 非受控组件
页面所有输入类的DOM,现用现取就是非受控组件。
- form 提交触发handleSubmit方法
- form中有两个输入项 ,用到回调函数ref ,并添加name属性
- handleSubmit方法 阻止页面跳转 ,并弹出提交的用户名和密码
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() // 阻止提交
const {username,password} = this
alert(`你输入的用户名是:${username.value},密码是:${password.value}`)
}
render(){
return(
<form action="" onSubmit={this.handleSubmit}>
用户名:<input ref={c=>this.username = c} type="text" name="username"/>
密码:<input ref={c=>this.password = c} type="text" name="password"/>
<button>登陆</button>
</form>
)
}
2. 受控组件
受控组件就是把值都存在了状态当中,当我们使用值时去状态state中取。
首先,受控组件不能使用ref了。那我们想改变值怎么办呢?给输入框添加onChange事件,只要输入框的值改变就会触发一个函数。
用户名:<input onChange={this.saveUsername} type="text" name="username"/>
这个函数传入的参数就是事件,通过target.value就能获得输入框的值。拿到这个值我们将其放到状态里。
saveUsername = (event)=>{
console.log(event.target.value)
this.setState({username:event.target.value})
}
随着输入我们就能在React开发工具中,发现已经维护到state中了
但是我们没有对state初始化,所以我们最好初始化一下state。
state ={
username:'',
password:''
}
那现在我们点击提交按钮,怎么获得值呢?我们得去state中取
handleSubmit = (event)=>{
event.preventDefault() // 阻止提交
const {username,password} = this.state
alert(`用户名是:${username}密码是:${password}`)
}
完整代码
class Login extends React.Component{
state ={
username:'',
password:''
}
handleSubmit = (event)=>{
event.preventDefault() // 阻止提交
const {username,password} = this.state
alert(`用户名是:${username}密码是:${password}`)
}
saveUsername = (event)=>{
console.log(event.target.value)
this.setState({username:event.target.value})
}
savePassword = (event)=>{
this.setState({password:event.target.value})
}
render(){
return(
<form action="" onSubmit={this.handleSubmit}>
用户名:<input onChange={this.saveUsername} type="text" name="username"/>
密码:<input onChange={this.savePassword} type="text" name="password"/>
<button>登陆</button>
</form>
)
}
}
相关文章
- package.json 配置完全解读
- 老板:你干了五年前端,为什么还犯这个简单的错误?
- 五星红旗国庆头像制作教程来了
- 五个一定要学会的 JavaScript 新特性
- Netty中有哪些核心组件?
- 使用 JavaScript 创建一个兔年春节倒数计时器
- Javascript实现右下角在线客服弹窗效果代码 - 网站网页在线客服源码教程
- 七个我在工作中经常使用的JavaScript技巧
- 客服系统切换中英文多语言 - 使用js更新URL参数来实现切换 【唯一客服】网站网页客服源码教程
- 聊聊 JS 断点的实现
- CSS容器查询终于来了,你知道吗?
- 单例模式谁都会,破坏单例模式听说过吗?
- 如何优雅地中断 Promise?
- 谈谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64
- 面向对象五大设计原则,你学会了吗?
- 解放生产力!Transform 支持单独赋值改变
- 十个你必须要知道的重要JavaScript 数组方法
- 一文读懂零拷贝技术
- 手写编程语言-递归函数是如何实现的?
- 新来个阿里 P7,仅花 2 小时,做出一个多线程永动任务,看完直接跪了