0

说，我有这个切换：

<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 参考明确指出不要使用“值”，但要使用“检查”。

上下文代码：

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

2 回答 2

1

代码

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

模板

<IonToggle checked={checked} 
       onIonChange={(e) => setChecked(e.detail.checked)} />
于 2020-10-13T18:10:33.387 回答
1

由于您有一个功能组件，因此您必须使用 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

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

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>
  )
}
于 2020-10-13T20:13:02.290 回答