React Hookで子コンポーネントから親コンポーネントへデータをその他の方法で送信する方法
2024-05-21
React Hook を使って子コンポーネントから親コンポーネントへデータを送信する方法
useState + Callback 関数
これは最も基本的な方法で、多くの状況で利用できます。
親コンポーネント
import React, { useState } from 'react';
function ParentComponent() {
const [data, setData] = useState('');
const handleChildData = (childData) => {
setData(childData);
};
return (
<div>
<ChildComponent handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
function ChildComponent(props) {
const handleClick = () => {
props.handleParentData('子コンポーネントから送信されたデータ');
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
useContext Hook を使うと、親コンポーネントで作成したコンテキストオブジェクトを、子コンポーネントで共有できます。
import React, { useState, createContext } from 'react';
const DataContext = createContext();
function ParentComponent() {
const [data, setData] = useState('');
return (
<DataContext.Provider value={{ data, setData }}>
<div>
<ChildComponent />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
</DataContext.Provider>
);
}
export default ParentComponent;
import React, { useContext } from 'react';
const DataContext = createContext();
function ChildComponent() {
const { data, setData } = useContext(DataContext);
const handleClick = () => {
setData('子コンポーネントから送信されたデータ');
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
React Redux
ステート管理が複雑な場合、React Reduxのようなライブラリを使うと便利です。
import React from 'react';
import { useDispatch } from 'react-redux';
function ParentComponent() {
const dispatch = useDispatch();
const handleChildData = (childData) => {
dispatch({ type: 'SET_DATA', payload: childData });
};
return (
<div>
<ChildComponent handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: { useSelector(state => state.data) }</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
import { useDispatch } from 'react-redux';
function ChildComponent(props) {
const dispatch = useDispatch();
const handleClick = () => {
dispatch({ type: 'SET_DATA', payload: '子コンポーネントから送信されたデータ' });
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
Custom Hook
上記の方法を組み合わせた、カスタム Hook を作成することもできます。
カスタム Hook
import React, { useState } from 'react';
function useData(initialValue) {
const [data, setData] = useState(initialValue);
const handleChildData = (childData) => {
setData(childData);
};
return { data, setData, handleChildData };
}
import React from 'react';
import useData from './useData';
function ParentComponent() {
const { data, setData, handleChildData } = useData('');
React Hook を使って子コンポーネントから親コンポーネントへデータを送信するサンプルコード
useState + Callback 関数
import React, { useState } from 'react';
function ParentComponent() {
const [data, setData] = useState('');
const handleChildData = (childData) => {
setData(childData);
};
return (
<div>
<ChildComponent handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
function ChildComponent(props) {
const handleClick = () => {
props.handleParentData('子コンポーネントから送信されたデータ');
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
useContext
import React, { useState, createContext } from 'react';
const DataContext = createContext();
function ParentComponent() {
const [data, setData] = useState('');
return (
<DataContext.Provider value={{ data, setData }}>
<div>
<ChildComponent />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
</DataContext.Provider>
);
}
export default ParentComponent;
import React, { useContext } from 'react';
const DataContext = createContext();
function ChildComponent() {
const { data, setData } = useContext(DataContext);
const handleClick = () => {
setData('子コンポーネントから送信されたデータ');
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
React Redux
import React from 'react';
import { useDispatch } from 'react-redux';
function ParentComponent() {
const dispatch = useDispatch();
const handleChildData = (childData) => {
dispatch({ type: 'SET_DATA', payload: childData });
};
return (
<div>
<ChildComponent handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: { useSelector(state => state.data) }</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
import { useDispatch } from 'react-redux';
function ChildComponent(props) {
const dispatch = useDispatch();
const handleClick = () => {
dispatch({ type: 'SET_DATA', payload: '子コンポーネントから送信されたデータ' });
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
カスタム Hook
import React, { useState } from 'react';
function useData(initialValue) {
const [data, setData] = useState(initialValue);
const handleChildData = (childData) => {
setData(childData);
};
return { data, setData, handleChildData };
}
import React from 'react';
import useData from './useData';
function ParentComponent() {
const { data, setData, handleChildData } = useData('');
return (
<div>
<ChildComponent handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
function ChildComponent(props) {
const handleClick = () => {
props.handleParentData('子コンポーネントから
React Hook を使って子コンポーネントから親コンポーネントへデータを送信する方法（その他）
useRef Hook を使って、子コンポーネントのDOM要素を参照し、その要素に格納されているデータを親コンポーネントに渡すことができます。
import React, { useState, useRef } from 'react';
function ParentComponent() {
const [data, setData] = useState('');
const childRef = useRef(null);
const handleChildData = () => {
const childData = childRef.current.value;
setData(childData);
};
return (
<div>
<ChildComponent ref={childRef} handleParentData={handleChildData} />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
function ChildComponent(props) {
const inputRef = useRef(null);
const handleClick = () => {
props.handleParentData();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
React Mutation Observer は、子コンポーネントのDOMの変化を監視し、その変化を親コンポーネントに通知するライブラリです。
import React, { useState, useEffect } from 'react';
import { useMutationObserver } from 'react-mutation-observer';
function ParentComponent() {
const [data, setData] = useState('');
const childRef = useRef(null);
const observer = useMutationObserver((mutations) => {
const childData = mutations[0].target.value;
setData(childData);
}, childRef);
useEffect(() => {
observer.observe(childRef.current);
return () => observer.disconnect();
}, []);
return (
<div>
<ChildComponent ref={childRef} />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
function ChildComponent() {
return (
<div>
<input type="text" />
</div>
);
}
export default ChildComponent;
Pub/Subパターンを使って、子コンポーネントから発行されたイベントを親コンポーネントで購読することができます。
import React, { useState } from 'react';
import { usePubSub } from '@react-pubsub/core';
function ParentComponent() {
const [data, setData] = useState('');
const { subscribe } = usePubSub();
useEffect(() => {
const unsubscribe = subscribe('child-data', (childData) => {
setData(childData);
});
return unsubscribe;
}, []);
return (
<div>
<ChildComponent />
<p>親コンポーネントで受け取ったデータ: {data}</p>
</div>
);
}
export default ParentComponent;
import React from 'react';
import { usePubSub } from '@react-pubsub/core';
function ChildComponent() {
const { publish } = usePubSub();
const handleClick = () => {
publish('child-data', '子コンポーネントから送信されたデータ');
};
return (
<div>
<button onClick={handleClick}>親コンポーネントにデータを送信</button>
</div>
);
}
export default ChildComponent;
これらの方法は、それぞれ異なるユースケースに適しています。状況に応じて適切な方法を選択してください。
- [React 子から親へ入力内容を渡す - Qiita](https
reactjs react-hooks
