如何处理@ionic-react 切换项的变化？

Question

我正在使用@ionic-react 库，现在我必须添加一个简单的 IonToggle true/false 值，但我卡住了，我无法处理更改，有趣的是如果我打印在屏幕上，我每次都看到“打开”的新值。如何处理@ionic-react Toggle 中的事件？

代码：

    import { IonToggle } from "@ionic/react";
/...
.../    
    <IonItem>
        <IonLabel color="primary" position="stacked">
            Enable Photo
        </IonLabel>
        <IonToggle datatype = "boolean" onChange={(e) => {console.log('test')}}/>
    </IonItem>

结果：

我期望值 true/false。你有什么主意吗？ :)

Answer 1

您可以使用状态来管理切换值(true/false)

import React, { useState } from 'react';

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

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

  return (
    <IonContent>
      <IonList>
       <IonItem>
          <IonLabel color="primary" position="stacked">
            Enable Photo
          </IonLabel>
          <IonToggle checked={isChecked} onChange={(e) => buttonToggle()}/>
        </IonItem>
      </IonList>
    </IonContent>
  )
}

如何处理@ionic-react 切换项的变化？

How to handle changes in @ionic-react toggle item?

javascript

reactjs

ionic-react