Tengo un caso de uso, donde:

• Cuando el elemento de la casilla de verificación está marcado, debe establecer el valor de una entrada con uno predefinido, y si no está marcado, debe establecerse con un 0 .
• Además, la entrada se puede editar, por lo que debería permitir establecer un nuevo valor, desmarcando la casilla de verificación (ya que el valor en este punto no es igual al predefinido)

Esta es la imagen que representa lo que estoy tratando de lograr.

Para hacer eso, estoy usando eventos onchange en ambos elementos html como muestro:

 <IonCheckbox slot="start" color='primary' checked={checked} onIonChange={changeCheckbox} /> <IonInput inputMode="numeric" color='light' value={inputValue} onIonChange={changeInputValue} />

El principal problema con esto es que cuando cambio el valor checked , activa el evento de entrada onChange y viceversa.

 const [checked, setChecked] = useState<boolean>(true); const [inputValue, setInputValue] = useState<string>(value); function changeCheckbox(event: any) { setChecked(event.detail.checked); setInputValue(event.detail.checked ? value : '0'); } function changeInputValue(event: any) { setInputValue(event.target.value); if (checked) { setChecked(false); } }