如何在 Ionic React 中通过 onChange 调用传递切换状态？

Question

说，我有这个开关：

<IonToggle id="IonToggleDarkMode" slot="end" checked={vars.darkMode} onChange={darkModeToggle}></IonToggle>

vars.darkMode是toggle的保存值，所以在加载页面时设置状态。 所以，知道我想编写一个调用 onChange 的函数，但我不知道如何在这里传递或访问“checked”属性...

例如，让我们这样做：

function darkModeToggle() {
  togglestate = // ???
  console.log( togglestate )
}

我该怎么做？

我也读过一些关于onChange={e => darkModeToggle(e)} 的文章，但老实说，我不明白...e 似乎没有将checked 属性传输到任何地方。我考虑过为切换 id 运行一个选择器，然后读取它的值，但 API reference 明确指出不使用“值”，但要使用“检查”。

上下文代码：

import React from 'react';
//other import statements

const { useState } = React;
const DarkModeSwitch = () => {
  // here you set the initial state using the useState hook:
  const [isChecked, setIsChecked] = useState(false);
  const darkModeToggle = () => {
    console.log(isChecked);
    setIsChecked(!isChecked);
  }
}
//other logic, calculations, JS functions, etc

//UI content
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>DarkMode</IonLabel>
          <IonToggle id="IonToggleDarkMode" slot="end" checked={isChecked} onChange={() => darkModeToggle())} />
        </IonItem>
      </IonList>
    </IonContent>
  )
}

Answer 1

由于您有一个功能组件，您必须使用 useState 挂钩来处理您的暗模式的状态。在您的 JSX 中，您可以通过将 isChecked 状态设置为 checked 属性来使用状态来处理 IonToggle（或复选框）。 下面是一个例子，你可以用一个简单的复选框来做到这一点：

const { useState } = React;

const DarkModeSwitch = () => {
  
    // here you set the initial state using the
    // useState hook:
    const [isChecked, setIsChecked] = useState(false);

    const darkModeToggle = () => {
    // toggle the state 'isChecked'
    // this makes it true if false and vice versa
    setIsChecked(!isChecked);
  }
  
    return (
    <div>
        <input 
        type="checkbox" 
        checked={isChecked} 
        onChange={() => darkModeToggle()} 
      />
    </div>
  )
}

这是一个工作示例： Codepen

编辑： 使用您的上下文代码，它可能如下所示：

import React, { useState } from 'react';

const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {

  // here you set the initial state using the useState hook:
  const [isChecked, setIsChecked] = useState(false);
  
  const darkModeToggle = () => {
    setIsChecked(!isChecked);
  }

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>DarkMode</IonLabel>
          <IonToggle id="IonToggleDarkMode" slot="end" checked={isChecked} onChange={() => darkModeToggle())} />
        </IonItem>
      </IonList>
    </IonContent>
  )
}

Answer 2

代码

  const [checked, setChecked] = useState(false);

模板

<IonToggle checked={checked} 
       onIonChange={(e) => setChecked(e.detail.checked)} />