最初に
Reactで親コンポーネントのstateを子コンポーネントで更新したいことが多い。
そういうときのための方法をメモ
親コンポーネント
export function parent(props) {
const [state, setState] = useState(props.info);
function handleClearBtn(e){
setState((prev) => {
prev.message = [];
return {...prev};
}); // state更新
}
function handleChange(e){
setState((prev) => {
prev.message = e.target.value;
return {...prev};
}); // state更新
}
return(
<Child
value={state.message}
onClearBtnClick = {e => handleClearBtn(e)}
onTagsChange = {(e, val) => handleChange(e, val)}
/>
);
}説明
親コンポーネントで子コンポーネントのイベントを定義し、それを引数として渡します。
子コンポーネント
function Child({ value, onClearBtnClick, onTextChange }){
return(
<>
<Button
type="button"
onClick={(params) => onClearBtnClick(params)}
>
クリア
</Button>
<input
type={text}
value={value}
onChange = {(params) => onTextChange(params, "test")}
/>
</>
)
}引数
子コンポーネントでは受け取った引数を対象のDOMにイベントとして設定します。
引数の数をちゃんとそろえれば複数受け渡すことも可能です。
最後に
言われてみればJSでは関数を引数として受け渡しをすることが普通なのでこうなるよなって感じです。
