React:如何在单击后禁用按钮

下面的这个例子展示了如何在 React 中单击某个按钮后禁用它。这在您希望防止用户重复点击多次的情况下很有用,例如提交表单、以促销价格购买产品(每人只能购买一个)等。

示例预览

React:如何在单击后禁用按钮

完整代码  带解释):

// KindaCode.com
// src/App.js
import { useState } from 'react';

function App() {
  // this determines whether the button is disabled or not
  const [isDisabled, setIsDisabled] = useState(false);

  // This function is called when the button is clicked the first time
  const handleClick = () => {
    alert('Hi there!');
    setIsDisabled(true);
  };

  return (
    <div style={styles.container}>
      <button
        disabled={isDisabled}
        onClick={handleClick}
        // this is the style for the button
        style={isDisabled ? styles.buttonDisabled : styles.button}
      >
        Button
      </button>
    </div>
  );
}

// Styles
const styles = {
  container: {
    width: '100vw',
    height: '100vh',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: '10px 30px',
    cursor: 'pointer',
  },
  buttonDisabled: {
    padding: '10px 30px',
    cursor: 'not-allowed',
  },
};

export default App;
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » React:如何在单击后禁用按钮