响应式网站模板 食品福田欧曼卡车

表单受控绑定

概念：使用react组件的状态(useState)控制表单的状态     类似于vue的双向绑定

 

实现 

准备一个react状态值

const [inputvalue,setinputvalue] = useState('1')

通过value属性绑定状态，通过onChange属性绑定状态同步的函数

 <input value={inputvalue} onChange={(e)=>setinputvalue(e.target.value)}></input>

获取Dom元素

在React中获取/操作 Dom,需要使用useRef钩子函数，分为两步：

1. 使用useRef创建ref对象，并于jsx进行绑定
2. 在dom可用时，通过创建的ref对象.current拿到DOM对象

实现案例

 创建ref对象    使用useRef创建

const inputRef = useRef(null)

绑定到dom元素上，使用ref进行绑定

<input ref={inputRef}></input>

渲染完毕之后通过.current获取

setTimeout(()=>{console.log(inputRef.current);
},3000)