• 投稿日:2023年03月28日 08時00分49秒
  • 更新日:2023年05月22日 09時49分11秒
親のstateを子で変更する

親のstateを子で変更する

最初に

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では関数を引数として受け渡しをすることが普通なのでこうなるよなって感じです。

SPECIAL THANKS

  1. Reactで子コンポーネントから親コンポーネントの値(State)を変更する方法 -ソフトウェア開発日記-
  2. Reactで親コンポーネントのstateを下位のコンポーネントのイベント処理で更新する -Qiita-