React受控组件和不受控组件

解释：受控组件和不受控组件

• 受控组件和不受控组件只存在于表单元素
• 所谓的受控组件就是表单元素的value需要通过state或者useState来定义
• 不受控组件意味着表单元素的value无法通过state获取，只能是用ref或者useRef来获取

import React, {useState, useRef} from "react";

export default function App10() {
    const [value, setValue] = useState("测试");
    const element = useRef(null);

  const inputChange = (e) => {
    console.log(e);
    setValue(e.target.value);
  };
  return (
    <>
      <h3>受控组件</h3>
      <input type="text" value={value} onChange={inputChange} />
      <button onClick={() => console.log(value)}>获取input的值</button>

      <h3>不受控组件</h3>
      <input type="text" ref={element} />
      <button onClick={() => console.log(element.current.value)}>获取input的值</button>
    </>
  );
}