（五）React受控表单、获取DOM

1. React受控表单

概念：使用React组件的状态（useState）控制表单的状态

1. 准备一个React状态值

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

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

<input 
   type="text"
   valye={value}
   onChange={(e) => setValue(e.target.value)}
/>

实现效果：

• 无论修改表单或者State，对应一方也会对应改变
  

2. React获取DOM

在React组件中获取、操作DOM，需要使用useRef钩子函数，分为两步：

1. 使用useRef创建ref对象，并与JSX绑定

 const inputRef = useRef(null)
<input type="text" ref={inputRef} />

2. 在DOM可用时，通过inputRef.current拿到DOM对象

console.log(inputRef.current)

用例：

import {useRef} from "react";

function App() {
    const inputRef = useRef(null)

    const showDOM = () => {
        console.log(inputRef.current)
    }
    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={showDOM}>获取DOM</button>
        </div>
    );
}

export default App;

点击按钮，console打印dom元素