[解決済み] Reactコンポーネントの状態をブーリアンに切り替えるには？

質問

Reactコンポーネントの状態をブーリアンに切り替える方法を知りたいです。例えば

コンポーネントのコンストラクタでbooleanの状態をチェックしています。

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

チェックボックスがクリックされるたびに状態を切り替えるために this.setState メソッドを使用しています。

<label>
  <input
    type=checkbox"
    value="check"
    onChange={(e) => this.setState({check: !check.value})}
  />
  Checkbox
</label>

もちろん Uncaught ReferenceError: check is not defined. . では、どうすればこれを実現できるのでしょうか？

どのように解決するのですか？

誰も投稿していないので、私が正解を投稿します。新しい状態の更新が前の状態に依存する場合、常に関数形式の setState の関数形式を使用します。これは、新しい状態を返す関数を引数として受け入れます。

あなたの場合

this.setState(prevState => ({
  check: !prevState.check
}));

参照 ドキュメント

この回答は人気があるので、React Hooks (v16.8+) で使用されるべきアプローチを追加します。

もし、あなたが useState フックを使っている場合は、次のコードを使います (新しい状態が前の状態に依存している場合)。

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);