reactjs - React Ionic 中的复选框

Question

我是 React 和 Ionic 的新手，我被复选框卡住了。我希望我的复选框在选中时为“真”，在未选中时为“假”，这样当“真”时它可以有一个线槽。

目前，当我添加一个新任务时，我被困在我的复选框中，取消选中它自己。

这是我的代码：

export const Home: React.FC = () => {
  
  const [isChecked, setIsChecked] = useState(false);

  const [checkboxList, setCheckboxList] = useState([
    { val: 'Exemple', 
      isChecked
    }
  ]);

  const [task, setTask] = useState('');
  
  const addTask = () => {
    checkboxList.push({val: task, isChecked});
    setTask('')
  }

  const deleteTask = (i:any) => {
    checkboxList.splice (i, 1);
    setCheckboxList([...checkboxList])
  }

  const toggleChange = () => {
    setIsChecked(!isChecked,);
  }

  return (
    <IonPage>
      <IonContent className="ion-padding">
        <IonList>
          {checkboxList.map(({ val, isChecked }, i) => (
            <IonItem key={i}>
              <IonCheckbox class= "checkbox"
                           slot="start" 
                           color= "secondary" 
                           value={val} checked={isChecked}
                           onIonChange={() => toggleChange}
                           />
                <IonLabel style={{textDecoration:  isChecked ? 'line-through' : 'none'}}>{val}</IonLabel>
                <IonButton onClick={e => deleteTask(i)}>
                  <IonIcon icon={trashOutline}></IonIcon>
                </IonButton>
            </IonItem>
          ))}
        </IonList>
      </IonContent>
      
      <IonFooter>
        <IonItem>
          <IonInput type="text"
                    value= {task}
                    onIonChange={e => setTask(e.detail.value!)}
                    placeholder= "Add task"
                    >
          </IonInput>
          <IonButton onClick={addTask}>
            <IonIcon icon={addCircleOutline}></IonIcon>
          </IonButton>
        </IonItem>
      </IonFooter>
    </IonPage>
  );
};

export default Home;

如果有人知道如何解决这个问题，那就太好了:)

标签： reactjsionic-framework