чекбокс и состояние кнопки

Рейтинг: 0Ответов: 1Опубликовано: 07.04.2023

мне надо что бы была одна кнопка exchange на странице и если пользователь проставил галку в чекбокс что бы она появлялась и если убирал галку -исчезал

import React, { useState, useEffect } from "react";

function CheckboxWithExchangeButton() {
  const [isChecked, setIsChecked] = useState(false);
  const [showExchangeButton, setShowExchangeButton] = useState(false);

  function handleCheckboxChange() {
    setIsChecked(!isChecked);
  }

  useEffect(() => {
    let timer: NodeJS.Timeout;
    if (isChecked) {
      timer = setTimeout(() => {
        setShowExchangeButton(true);
      }, 1000);
    }
    return () => clearTimeout(timer);
  }, [isChecked]);

  useEffect(() => {
    if (!isChecked) {
      const timer = setTimeout(() => {
        setShowExchangeButton(false);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, [isChecked]);

  return (
    <div>
      {showExchangeButton && <button>Exchange </button>}
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
      </label>
    </div>
  );
}
javascript reactjs typescript
Источник: Stack Overflow на русском

Ответы

▲ 0

кнопка exchange на странице и если пользователь проставил галку в чекбокс что бы она появлялась и если убирал галку -исчезал

Предложу вот такой вариант...

function CheckboxWithExchangeButton() {
  const [isChecked, setIsChecked] = React.useState(false);
  const [showExchangeButton, setShowExchangeButton] = React.useState(false);

  function handleCheckboxChange() {
    setIsChecked(!isChecked);
  }

  React.useEffect(() => {
    let timer; //: NodeJS.Timeout;
    if (isChecked) {
      timer = setTimeout(() => {
        setShowExchangeButton(true);
      }, 1000);
    }
    return () => timer && clearTimeout(timer);
  }, [isChecked]);

  React.useEffect(() => {
    let timer;
    if (!isChecked) {
      timer = setTimeout(() => {
        setShowExchangeButton(false);
      }, 1000);
      return () => timer && clearTimeout(timer);
    }
  }, [isChecked]);

  return (
    <div>
      {showExchangeButton && <button>Exchange </button>}
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleCheckboxChange} />
      </label>
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<CheckboxWithExchangeButton />);
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  
  <div id='root'></div>