前端开发React18 - 表单元素受控，useRef，UUID，DAYJS

受控表单绑定：

• 使用组件的 state (useState) 绑定表单的 value
• 表单的 value 新值设置 state

import { useState } from 'react'

function App() {

const [num, setNum] = useState('')

return (

<div className="App">

{num}

<br/>

<input value={num} onChange={(e)=>{setNum(e.target.value)}} />

</div>

);

}

export default App;

useRef获取DOM元素：

import { useState, useRef } from 'react'

function App() {

const inpRef = useRef(null)

const [num, setNum] = useState('')

return (

<div className="App">

<input ref={inpRef} value={num} onChange={(e)=>{setNum(e.target.value)}} />

<br/>

<button onClick={(e)=>{ setNum(''); inpRef.current.focus();}}>click clear</button>

</div>

);

}

UUID 插件用法：

dayjs 插件用法：