React 设计模式~容器组件/不受控制的受控组件~

import react from "react";export const uncontrolledform = () => {  const nameinputref = react.createref();  const ageinputref = react.createref();  console.log("renedering");  const submitform = (e) => {    console.log(nameinputref.current.value);    console.log(ageinputref.current.value);    e.preventdefault();  };  return (    

import React, { useEffect, useState } from "react";export const ControlledForm = () =&gt; {  const [errorMessage, setErrorMessage] = useState("");  const [name, setName] = useState("");  const [age, setAge] = useState();  useEffect(() =&gt; {    if (name.length       {errorMessage&amp;&amp; <p>{errorMessage}</p>}      <input type="text" name="name" placeholder="Name" value="{name}" onchange="{(e)"> setName(e.target.value)}      /&gt;      <input type="number" name="age" placeholder="Age" value="{age}" onchange="{(e)"> setAge(e.target.value)}      /&gt;      <button>Submit</button>      );};