1.classname优化类名显示
2.受控表单绑定
import { useState } from "react";
// 1.声明一个react状态 -useState
// 2.核心绑定流程
// 2.1通过value属性绑定react状态
// 2.2 绑定onChange事件 通过事件参数e拿到输入框最新的值 反向修改到react状态中
function App(){
const [value,setValue] = useState('');
return(
<div>
{/* 通过调用参数e，使用setValue修改react状态，实现数据传入value中 */}
<input value={value} onChange={(e)=>setValue(e.target.value)} type="text"></input>
</div>
)
}
export default App;
3.React中获取DOM
import { useRef } from "react";
// React中获取Dom
// 1.useref生成ref对象，绑定到dom标签上
// 2.dom可用时，ref.current获取dom
// 3.渲染完毕之后（dom生成后）才可用
function App(){
const inputRef = useRef(null)
const showDom = ()=>{
console.log(inputRef.current.value);
}
return(
<div>
<input type="text" ref={inputRef}></input>
<button onClick={showDom}>获取dom</button>
</div>
)
}
export default App;
结果：
