React使用知识点汇总

import { useRef, useState } from "react";

export default function NoState() {
    const [name,setName]  = useState("")
    const usernameRef = useRef();
    const onSubmit = (e) => {
        e.preventDefault();
        console.log(
        "需要提交的数据",
        usernameRef.current,
        name
        );
    };
    const changeInput = (e)=>{
        usernameRef.current = e.target.value
    }
    const changeStateInput = (e)=>{
        setName(e.target.value)
    }
    console.log("组件重新渲染了");
    return (
        <form onSubmit={onSubmit}>
        <label htmlFor="name">修改ref</label>
        <input type="text" onChange={changeInput}/>
        <br />
        <label htmlFor="name">修改state</label>
        <input type="text" onChange={changeStateInput}/>
        <br />
        <button type="submit">提交</button>
        </form>
    );
}