

on/offを切り替えるswitchがあり、切り替えるときにchangeState関数が呼ばれます。  
引数として渡されるkeyの中身は{numberState: true}の形で渡されます。  
渡された値でstateを変えたいのですがうまくいきません  
わかる人がいましたら教えて欲しいです。よろしくお願いします。

コンポーネントはmaterialUIを使っています

[code]

    interface IState {
      numbers: boolean;
      symbol: boolean;
      texxt: boolean;
    }
    
    const index:FC = () => {
      const [state, setState] = useState<IState>();
    
     const changeState = (key: IState) => {
        console.log(key)
        // setStateでうまくstateを変更できない
        setState({ ...state, ...{ key: !key }});
      };
    
     <Switch
      checked={numberState}
      onChange={(e) => changeState({ numberState: e.target.checked })}
     />
     <Switch
      checked={textState}
      onChange={(e) => changeState({ textState: e.target.checked })}
     />
     <Switch
      checked={symbolState}
      onChange={(e) => changeState({ symbolState: e.target.checked })}
     />
    
[/code]


CC BY-SA 4.0
2020-04-06T03:08:10.440
65386
2020-04-28T06:13:30.927
39510
question
javascript reactjs typescript
React 共通処理でstateを変えたい


`onChange`で取得した値は既に反映後の状態なので、`boolean`値を反転させる必要は無いかと思います。

[code]

    import React, { FC, useState } from "react";
    import { Switch } from "@material-ui/core";
    
    interface IState {
      numberState: boolean;
      symbolState: boolean;
      textState: boolean;
    }
    
    const initIState = {
      numberState: false,
      symbolState: false,
      textState: false,
    };
    
    const Index: FC = () => {
      const [state, setState] = useState<IState>(initIState);
    
      const changeState = (key: Partial<IState>) => {
        console.log(key);
        setState({ ...state, ...key });
      };
    
      return (
        <>
          <Switch
            checked={state.numberState}
            onChange={(e) => changeState({ numberState: e.target.checked })}
          />
          <Switch
            checked={state.textState}
            onChange={(e) => changeState({ textState: e.target.checked })}
          />
          <Switch
            checked={state.symbolState}
            onChange={(e) => changeState({ symbolState: e.target.checked })}
          />
        </>
      );
    };
    export default Index;
    
[/code]


CC BY-SA 4.0
2020-04-28T06:13:30.927
66055
2020-04-28T06:13:30.927
2808
65386
answer