React JS 用一个按钮改变一个值

Question

根据按下的按钮，我需要在模式中显示一些特殊的东西。 如您所见，我有 2 个 IonButton，按下时会修改 setShowModal ({isOpen: true})，即 isOpen 为 true。但我还必须通过按 IonButton 来修改 state.count 的值

我该怎么做？

正如您在事件中看到的那样 onClick = {() => setShowModal ({isOpen: true}), state.count = 0} 我尝试修改 state.count 的值，但出现代码错误

const App = () => {
  const [showModal, setShowModal] = useState({ isOpen: false });
  const [retVal, setRetVal] = useState(null);
  const state = {
    count: 0
  };


  return (
    <IonApp>
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButton
              onClick={() => setShowModal({ isOpen: true }), state.count=0}
              slot="end"
             
            >
              OPEN MODAL 1
            </IonButton>
            <IonButton
              onClick={() => setShowModal({ isOpen: true }), state.count=1}
              slot="end"
            >
              OPEN MODAL 2
            </IonButton>
            <IonTitle>MODAL TEST</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          <IonModal
            animated={true}
            isOpen={showModal.isOpen}
            onDidDismiss={() => setShowModal({ isOpen: false })}
          >
            <MyModal tipo={0}
              onClose={(value) => {
                setShowModal({ isOpen: false });
                value ? setRetVal(value) : setRetVal("User Cancelled");
              }}
            />
          </IonModal>
          <h2>Test Modal</h2>
          <li>Modal in seperate component</li>
          <li>Modal with List</li>
          <li>Modal That Scrolls</li>
          <li>Modal That returns Value When Clicked</li>
          <div>
            <h3>RETURNED VALUE</h3>
            <p>{retVal}</p>
          </div>
        </IonContent>
      </IonPage>
    </IonApp>
  );
};

export default App;

const MyModal = ({ onClose }, {any:tipo}) => {
  const data = Array(100).fill("TEST");
  if(tipo===0){
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => onClose(null)} slot="end">
              CLOSE MODAL
            </IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <strong>Usuario no registrado</strong>
          </div>
          <IonButton href="/registro">Registrarse</IonButton>
          <IonItem>Click List Item To Return Selected Value</IonItem>
          <IonList>
            {data.map((e, i) => {
              return <IonItem onClick={() => onClose(i)}>{e + i}</IonItem>;
            })}
          </IonList>
        </IonContent>
      </>
    );
  }

  if(tipo===1){
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => onClose(null)} slot="end">
              CLOSE MODAL
            </IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <strong>Tipo 2</strong>
          </div>
          <IonButton href="/registro">Registrarse</IonButton>
          <IonItem>Click List Item To Return Selected Value</IonItem>
          <IonList>
            {data.map((e, i) => {
              return <IonItem onClick={() => onClose(i)}>{e + i}</IonItem>;
            })}
          </IonList>
        </IonContent>
      </>
    );
  }
  
};

Answer 1

首先，为什么不使用count 的状态？ 而 IonButton 的 onClick 可以是这样的：

onClick={() => {
  setShowModal({ isOpen: true});
  setCount(0)
}}