useInput2

useinputをもう少し拡大して、もっとセクシーにします.
これをNPMに登録し、人々が利用できるようにします.
initialVlaueではなく、有効性を検証する機能が含まれています.

ここで

validatorの追加
validator関数は特定の文字を書けないようにしてみます
onchageに価値を設定する

import "./styles.css";
import React, { useState } from "react";

const useInput = (initialValue, validator) => {
  const onChange = (event) => {
    const {
      target: { value }
    } = event;
    let willUpdate = true;
    if (typeof validator === "function") {
      willUpdate = validator(value);
      //유효성 검사를 실행한다
    }

    if (willUpdate) {
      setValue(value);
    }
  };
  const [value, setValue] = useState(initialValue);
  return { value, onChange };
};
export default function App() {
  const maxLen = (value) => value.length < 10;
  const name = useInput("Mr.", maxLen);
  //매번 validator은 바뀔거고 타입이 function 이라면 wilUpate에 validator의 결과를 업로드 할 것이다.
  //이 케이스에서 validator은 maxLen 이고 결과는 true 혹은 false가 될 것이다. true면 업데이트 가능하다
  return (
    <div className="App">
      <h1>Hello</h1>
      <input placeholder="Name" {...name} />
    </div>
  );
}

ワード長が10を超えるかどうかを検証するベリファイアが確立されました
条件は自由に入れます.

では@は入力されません.