REACT_HOOKS useState/useInput(Feat. Nomad)

14364 ワード
テキストリンク

IKE姉さんと一緒に反応の出会い
制作後に現れる
実戦でUSStateを学ぶため、Nomad Corder無料HOOKS講座を開いた.
私はあなたが好きです.ふふ、文法が理解できないとわかりづらいですが、コードを見る観点は他のエンコーダとは違います.こんなに近くに来てくれて嬉しいです.

useStateを使用します。


useState-useInputの適用


デフォルト構成部品構造

//HookInputs.JSX

const HookInputs = () => {
  return (
    <>
      <input type="text" /> <button>입력</button>
    </>
  );
};

export default HookInputs;
stateを作成しvalueをsetStateとする
const HookInputs = () => {
  const [value, setValue] = useState("");
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <>
      <input type="text" value={value} onChange={handleChange} />{" "}
      <button>입력</button>
    </>
  );
};

export default HookInputs;
stateの作成と条件文の挿入
const HookInputs = () => {
  const [value, setValue] = useState("");
  const validator = (value) => value.length < 8;
  let checkValue = true;
  const handleChange = (e) => {
    if (typeof validator === "function") {
      checkValue = validator(value);
      if (!checkValue) return;
    }
    if (checkValue) setValue(e.target.value);
    return;
  };
  return (
    <>
      <input type="text" value={value} onChange={handleChange} />{" "}
      <button>입력</button>
    </>
  );
};
useinput区切り関数の使用
const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);
  let checkValue = true;
  const onChange = (e) => {
    if (typeof validator === "function") {
      checkValue = validator(value);
    }
    if (checkValue) setValue(e.target.value);
  };
  return { value, onChange };
};
//useInput - state값 저장, validation검사
const HookInputs = () => {
  const validator = (value) => value.length < 8;
  const user = useInput("", validator);
  return (
    <>
      <input type="text" {...user} /> <button>입력</button>
    </>
  );
};

export default HookInputs;
次は例題です!
設計例は次のとおりです.

これをするアクション!!
[Laravel]Laravellリングでの制御の詳細
[Development Record::R] 1. Variable