checkbox勾选、按钮才能点击，勾选禁用，material-ui改造之路

2023-09-20 17:44:05

前言

在项目中经常会有这样的需求，特别是在H5移动端，成了家常便饭，今天来详细讲讲代码实现过程。

代码实现

// index.html
<div>
  <Checkbox id="checkbox" />
  <Button id="button" disabled={!checkbox.checked}>点我</Button>
</div>

// index.js
import * as React from "react";
import { Checkbox, Button } from "@material-ui/core";

const App = () => {
  const [checkbox, setCheckbox] = React.useState(false);

  const handleChange = (event) => {
    setCheckbox(event.target.checked);
  };

  return (
    <div>
      <Checkbox id="checkbox" onChange={handleChange} />
      <Button id="button" disabled={!checkbox}>点我</Button>
    </div>
  );
};

export default App;

实现原理

在 HTML 代码中，我们使用了一个 Checkbox 组件和一个 Button 组件。Checkbox 组件用于勾选，Button 组件用于点击。

在 JavaScript 代码中，我们使用了一个 useState 钩子来管理 Checkbox 组件的状态。当 Checkbox 组件勾选时，useState 钩子会将 Checkbox 组件的状态设置为 true。当 Checkbox 组件取消勾选时，useState 钩子会将 Checkbox 组件的状态设置为 false。

我们还使用了一个 handleChange 函数来处理 Checkbox 组件的 onChange 事件。当 Checkbox 组件勾选时，handleChange 函数会将 Checkbox 组件的状态设置为 true。当 Checkbox 组件取消勾选时，handleChange 函数会将 Checkbox 组件的状态设置为 false。

我们使用 Checkbox 组件的状态来控制 Button 组件的 disabled 属性。当 Checkbox 组件勾选时，Button 组件的 disabled 属性为 false，这意味着 Button 组件可以点击。当 Checkbox 组件取消勾选时，Button 组件的 disabled 属性为 true，这意味着 Button 组件不能点击。