React基础之受控表单绑定

受控表单绑定概念:使用React组件的状态控制表单的状态

实例代码

import React, { useState } from 'react';

import classNames from 'classnames';

//1.声明一个react状态-useState

//2.核心绑定流程

//1.通过value书写绑定react状态

//2.绑定onChange事件,通过事件参数e拿到输入框最新数据,反向修改react状态

function App() {

const [value,setValue]= useState('')

return (

<div>

<input

value={value}

onChange={(e)=>setValue(e.target.value)}

type='text'

>

</input>

</div>

);

}

export default App;

React中获取去Dom

需要使用useRef钩子函数来获取,分为两步

1.使用useRef创建ref独享,并且与jsx绑定

2.在Dom可用时,在inutRef.current拿到DOM对象

import React, { useRef, useState } from 'react';

//1.使用useRef生成Ref对象,绑定到dom标签中

//2.dom可用时,ref.current获取dom

//需要整个组件渲染完毕或是dom生成之后才能使用

function App() {

const inputRet=useRef(null)

const showDom=()=>{

console.dir(inputRet.current);

}

return (

<div>

<input type='text' ref={inputRet}>

</input>

<button onClick={showDom}>获取Dom</button>

</div>

);

}

export default App;

相关推荐
ZXT3 分钟前
promise & async await总结
前端
Jerry说前后端3 分钟前
RecyclerView 性能优化:从原理到实践的深度优化方案
android·前端·性能优化
画个太阳作晴天11 分钟前
A12预装app
linux·服务器·前端
77238937 分钟前
解决 Microsoft Edge 显示“由你的组织管理”问题
前端·microsoft·edge
烛阴1 小时前
前端必会:如何创建一个可随时取消的定时器
前端·javascript·typescript
JarvanMo1 小时前
Swift 应用在安卓系统上会怎么样?
前端
LinXunFeng2 小时前
Flutter - 详情页 TabBar 与模块联动?秒了!
前端·flutter·开源
萌萌哒草头将军2 小时前
Oxc 最新 Transformer Alpha 功能速览! 🚀🚀🚀
前端·javascript·vue.js
Justinc.2 小时前
HTML5新增属性
前端·html·html5
1024小神3 小时前
nextjs项目build导出静态文件
前端·javascript