Summit event에 2번째 파라미터 주기

김명성·2022년 5월 14일
0

REACT

목록 보기
31/32
post-custom-banner

submit 후 useRef를 사용하는 자식요소의 input을 어떻게 비워줄 수 있을까 하다가 예전에 함수를 통해 자식 컴포넌트의 state를 보낼 수 있다는 말이 떠올라 적용 해보았다.

onSubmit 함수 (부모 컴포넌트)

  const onSubmit = (e,func) => {
    const storedLocalProducts =
      JSON.parse(localStorage.getItem('product')) || [];
    e.preventDefault()
    setStoredProduct([productInformation, ...storedLocalProducts]);
    dispatchProductInfomation({type:'INITIALIZE_INPUT', value:''})
    func()
  };

자식 컴포넌트

const InputForm = ({...}) => {
  const idInput = useRef(null);
  const priceInput = useRef(null);
  const titleInput = useRef(null);
  const descriptionInput = useRef(null);


  const clearInput = () =>{
    idInput.current.value = ''
    priceInput.current.value = ''
    titleInput.current.value = ''
    descriptionInput.current.value = ''
    idInput.current.focus()
  }
  return (
    <>
    <Form  onSubmit={(event)=>onSubmit(event,clearInput)}>
post-custom-banner

0개의 댓글