如何绑定布尔值以切换Button的Click事件

import React, { useState } from 'react';

function App() {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => {
    // 处理Button的Click事件
    if (isClicked) {
      // 如果isClicked为true，执行一些操作
    } else {
      // 如果isClicked为false，执行另一些操作
    }
  };

  return (
    <div>
      <Button onClick={handleClick}>Toggle Button</Button>
    </div>
  );
}

export default App;

<template>
  <div>
    <button @click="handleClick">{{ isClicked ? 'Button Clicked' : 'Toggle Button' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClicked: false,
    };
  },
  methods: {
    handleClick() {
      // 处理Button的Click事件
      if (this.isClicked) {
        // 如果isClicked为true，执行一些操作
      } else {
        // 如果isClicked为false，执行另一些操作
      }
    },
  },
};
</script>

<button id="toggleButton">Toggle Button</button>

<script>
const toggleButton = document.getElementById('toggleButton');
let isClicked = false;

toggleButton.addEventListener('click', handleClick);

function handleClick() {
  // 处理Button的Click事件
  if (isClicked) {
    // 如果isClicked为true，执行一些操作
  } else {
    // 如果isClicked为false，执行另一些操作
  }
}

</script>