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

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《React 设计模式~容器组件/不受控制的受控组件~》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

• 不受控制的组件

这种模式意味着 react 不控制表单数据，dom 保存表单状态。

访问 dom 时，必须使用 useref 钩子设置 ref 属性。

・src/components/uncontrol-form.jsx

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 (
    <form onsubmit={submitform}>
      &lt;input name=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;name&quot; ref={nameinputref} /&gt;
      &lt;input name=&quot;age&quot; type=&quot;number&quot; placeholder=&quot;age&quot; ref={ageinputref} /&gt;
      &lt;input type=&quot;submit&quot; value=&quot;submit&quot; /&gt;
    </form>
  );
};

• 受控组件

此模式意味着 react 使用 usestate 钩子控制表单数据。

我们可以完全控制输入值并实时更新。

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

export const ControlledForm = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const [name, setName] = useState("");
  const [age, setAge] = useState();

  useEffect(() => {
    if (name.length < 1) {
      setErrorMessage("name can not be empty");
    } else {
      setErrorMessage("");
    }
  }, [name]);

  return (
    <form>
      {errorMessage&& <p>{errorMessage}</p>}
      &lt;input
        type=&quot;text&quot;
        name=&quot;name&quot;
        placeholder=&quot;Name&quot;
        value={name}
        onChange={(e) =&gt; setName(e.target.value)}
      />
      &lt;input
        type=&quot;number&quot;
        name=&quot;age&quot;
        placeholder=&quot;Age&quot;
        value={age}
        onChange={(e) =&gt; setAge(e.target.value)}
      />
      <button>Submit</button>
    </form>
  );
};

以上就是《React 设计模式~容器组件/不受控制的受控组件~》的详细内容，更多关于的资料请关注golang学习网公众号！