環境
React：v18.3.1
子から親のState更新
※ 親から子のパターンはlifting state up （Stateのリフトアップ）を考えた方が良い。
App.tsxの内容
import { ReactNode } from 'react';
import Parent from './Parent.tsx';
function App(): ReactNode {
return (
<>
あいうえお
<Parent />
</>
);
}
export default App;
Parent.tsxの内容
import { ReactNode, useState } from 'react';
import Child1 from './Child1.tsx';
function Parent(): ReactNode {
const [child1Value, setChild1Value] = useState<string>('Child1の初期値');
const [parentValue1, setParentValue1] = useState<string>('Parentの初期値');
function parentBtnClickFunc() {
alert('parentBtnClickFunc');
setChild1Value('parentBtnClickFunc');
}
return (
<>
<div>
親：
{parentValue1}
</div>
<button type="button" onClick={parentBtnClickFunc}>
親ボタン
</button>
<Child1 childProp={child1Value} parentStateFunc={setParentValue1} />
</>
);
}
export default Parent;
Child1.tsxの内容
import { ReactNode } from 'react';
type Child1Props = {
childProp: string,
parentStateFunc: Function
};
function Child1({ childProp, parentStateFunc }: Child1Props): ReactNode {
function childBtnClickFunc(): void {
alert('childBtnClickFunc');
parentStateFunc('子からStateが変更されました');
}
return (
<>
<div>
子：
{childProp}
</div>
<button type="button" onClick={childBtnClickFunc}>
子ボタン
</button>
</>
);
}
export default Child1;