💡

React 子コンポーネント内で入力したデータを親コンポーネントに渡す。

2022/03/15に公開

Data.tsx(親コンポーネント)でSearch.tsx(子コンポーネント)内で入力した値を使いたい場合は、このように対応する。
親コンポーネント内で、入力時のイベントと値を設定。(inputとonChangeSearch)
propsで子コンポーネントに渡し、子コンポーネントのinputタグで受け取ったinputをvalue={input}という形にし、onChageの時にonChangeSearchが実行されるようにすると、子コンポーネントで入力された値が親のinputにセットされる。

Data.tsx
const [input, setInput] = useState("");
const onChangeSearch = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setInput(e.target.value);
    },
    []
 );
 const onClickSearch = () => {
    setSearchResult([]);
    getSortData();
    setInput("");
    setDataShow(true);
  };
 return (
 <Search
   onChangeSearch={onChangeSearch}
   onClickSearch={onClickSearch}
   input={input}
  />
 )
Search.tsx
type PROPS = {
  input: string;
  onChangeSearch: (text: React.ChangeEvent<HTMLInputElement>) => void;
  onClickSearch: () => void;
};

...

const { onChangeSearch, onClickSearch, input } = props;
return (
<input 
  value={input}
  onChange={(e) => onChangeSearch(e)}
  onKeyPress={(e) => {
            if (e.key == "Enter") {
              e.preventDefault();
              onClickSearch();
              blurEvent();
            }
          }}
/>
)

Discussion