受控组件和非受控组件

表单受控组件: 表单的状态受到state的控制 表单非受控组件: 表单的状态不受到state的控制，状态值存在dom中的 在实际开发中，受控和非受控组件除了上面的理解之外，还有一种理解，就是用来描述父子组件的。 比如子组件的状态受到父组件的控制，我们就认为子组件是受控组件(父组件给子组件传递props) 子组件的窗台不受父组件控制，我们就认为子组件是非受控组件

import React, { FC ,useState} from "react";
const Frominput: FC = (props) => {
    const [txt,setTxt]=useState("张三")
    const changeClick=()=>{
        setTxt("李四")
    }
    const changeHangle=(e:React.ChangeEvent<HTMLInputElement>)=>{
        setTxt(e.target.value)
    }
  return (
    <div>
      <label htmlFor="name">请输入用户名</label>
      <input type="text" id="name" value={txt} onChange={changeHangle}/>
      <button onClick={changeClick}>点我修改文本框的值</button>
    </div>
  );
};
export default Frominput