如何在 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 清楚地指出 'value' 不被使用，但 'checked' 是。

上下文代码：

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

代码

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

模板

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

Answer 2

因为你有一个功能组件，你必须使用 useState 钩子来处理你的 darkMode 的状态。在您的 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

编辑：使用你的 context-code 它可能看起来像这样：

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

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

How do I pass a toggles state with its onChange-call in Ionic React?

javascript

reactjs

ionic-framework

react-native

ionic-react