React受控绑定

受控绑定

概念:使用React组件的状态(useState)控制表单的状态

简单理解为双向绑定

jsx 复制代码
function App(){
  const [value, setValue] = useState('')
  return (
    <input 
      type="text" 
      value={value} 
      onChange={e => setValue(e.target.value)}
    />
  )
}

非受控绑定

概念:通过获取DOM的方式获取表单的输入数据,就是获取dom对象

  1. 使用useRef创建 ref 对象,并与 JSX 绑定
    const inputRef = useRef(null),通过ref属性绑定
  2. 在DOM可用时,通过 inputRef.current 拿到 DOM 对象
    inputRef.current
jsx 复制代码
function App(){
  const inputRef = useRef(null)

  const onChange = ()=>{
    console.log(inputRef.current.value)
  }
  
  return (
    <input 
      type="text" 
      ref={inputRef}
      onChange={onChange}
    />
  )
}
相关推荐
naice3 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼7 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin12 分钟前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗15 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀69629 分钟前
CSS-响应式布局
前端
三小河34 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法38 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku39 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69642 分钟前
2025-35st-w-日常开发总结
前端
我是日安44 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js