一,非受控组件
表单中的数据在需要的时候“现用现取”(通过ref获得到节点,进而访问到value)
- 受控指的是受到状态state的控制
- 使用ref属性
<body> <div id="test"></div> <script type="text/babel"> class Demo extends React.Component { render(){ return ( <form onSubmit = {this.handleLogin}> 姓名:<input type='text' ref={curNode => this.userNameNode = curNode}/> 密码:<input type='password' ref = {curNode => this.passwordNode = curNode}/> <button>提交</button> </form> ) } handleLogin = event=>{ event.preventDefault() console.log(this) const {userNameNode, passwordNode} = this alert(`姓名为${userNameNode.value},密码为${passwordNode.value}`) } } ReactDOM.render(<Demo/>, document.getElementById('test')) </script> </body> </html>
二,受控组件
表单中输入类DOM(input checkbox select等)随着用户的输入,将值收集到state中,那么就成为受控组件
- 给A元素绑定事件,拿的是A元素
<body> <div id="test"></div> <script type="text/babel"> class Demo extends React.Component { state = { userName: '', password: '' } render(){ return ( <form onSubmit = {this.handleLogin}> 姓名:<input type='text' onChange={this.saveUserName} /> 密码:<input type='password' onChange={this.savePassword} /> <button>提交</button> </form> ) } // 保存用户名到state中 saveUserName = event=>{ this.setState({userName: event.target.value}) } // 保存密码到state中 savePassword = event=>{ this.setState({password: event.target.value}) } handleLogin = event=>{ event.preventDefault() console.log(this) const {userName, password} = this.state alert(`姓名为${userName},密码为${password}`) } } ReactDOM.render(<Demo/>, document.getElementById('test')) </script> </body>
三,小知识点
-
onChange方法监控input输入框改变
-
event.target是发生事件的事件源,每次在输入框中输入内容,就会获取到事件源
什么时候不使用ref?
发生事件的事件源和获取事件是同一个,使用event.target可以获取到元素上的属性,此时不使用ref(比如给A绑定事件,恰巧拿的是A元素上的属性)
当给按钮B绑定事件,获取输入框A中的属性,此时需要借助ref实现
<div id="test"></div> <script type="text/babel"> class Demo extends React.Component { render(){ return ( <form onSubmit = {this.handleLogin}> 姓名:<input type='text' onChange={this.demo} /> 密码:<input type='password' /> <button>提交</button> </form> ) } demo(event){ console.log(event.target) } handleLogin = event=>{ event.preventDefault() console.log(this) } } ReactDOM.render(<Demo/>, document.getElementById('test'))
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!