useInput

Siwoo Pak·2021년 7월 15일
0

React

목록 보기
11/14
post-thumbnail

useInput

  • input 정보를 업데이트하는 hook
  • useState 및 onChange()를 사용하여 input에 관련된 정보를 처리.
import React, {useState} from 'react';
import ReactDom from 'react-dom';

import "./styles.css";

const useInput = (initValue) => {
  const [value, setValue] = useState(initValue)
  const onChange = event => {
    console.log(event.target)
  }
  return {value, onChane}; 	
}
const App = () => {
  const name = useInput("Mr.")
  return(
    <div classname="App">
      <h1>hello</h1>
	  <input placeholder="name" value={name.value} onChange={name.onChange}>
    // <input placeholder="Name" {...name}>
    </div>
  );
}

ReactDom.render(<app />, document.querySelector("root"));

import React, {useState} from 'react';
import ReactDom from 'react-dom';

import "./styles.css";

const useInput = (initValue, validator) => {
  const [value, setValue] = useState(initValue);
  const onChange = event => {
    const {
      target: {value}   
    } = event;
    let willUpdate = true;
    if(typeof validator === 'function') {
      willUpdate = validator(value);
    }
    if(willUpdate) setValue(value);
  }
  return {value, onChange}; 	
}
const App = () => {
  const maxLen = (value => value.length < 10)
  const name = useInput("Mr.", maxLen);
  return(
    <div classname="App">
      <h1>hello</h1>
	  <input placeholder="Name" {...name}>
    </div>
  );
}
ReactDom.render(<app />, document.querySelector("root"));
  • useInput.js
export const useInput = (initValue, validator) => {
  const [value, setValue] = useState(initValue);
  const onChange = event => {
    const {
      target: {value}   
    } = event;
    let willUpdate = true;
    if(typeof validator === 'function') {
      willUpdate = validator(value);
    }
    if(willUpdate) setValue(value);
  }
  return {value, onChange}; 	
}
profile
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'

0개의 댓글