如何在Ionic React中通过其onChange-call传递切换状态？

问题描述

很抱歉，这是一个愚蠢的问题，但是我是React，Ionic和JS的新手，所以请多多包涵。

说，我有这个切换开关：

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

vars.darkMode是切换的保存值，因此在加载页面时设置了状态。 因此，知道我想编写一个称为onChange的函数，而在这里我不知道如何通过或访问“已检查”属性...

例如，让我们这样做：

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>
  )
}

解决方法

由于具有功能组件，因此必须使用useState挂钩来处理darkMode的状态。在您的JSX中，您可以通过将isChecked状态设置为被选中的prop来使用该状态来处理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>
  )
}

,

代码

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

模板

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