💡
React 子コンポーネント内で入力したデータを親コンポーネントに渡す。
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