使用文本文件创建材质 Ui 复选框

如何解决使用文本文件创建材质 Ui 复选框

如何创建 Material ui 复选框，选中时将禁用 Textfield 并修复对齐？

沙盒链接：

https://codesandbox.io/s/material-demo-forked-mfnqk?file=/demo.tsx

解决方法

您应该使用 List component provided by Material UI。给它 alignItems="center" 道具来修复对齐。然后，Material UI Checkboxes 组件接受禁用道具的布尔值，因此您应该将其设置为状态挂钩中的“已检查”值。这样，当“检查”更新时，禁用的道具也会更新。我还在 textField 中添加了一个 fullWidth 属性以使其不那么混乱。 A live demo can be found here，但我是这样解决的：

import React from "react";
import Checkbox from "@material-ui/core/Checkbox";
import TextField from "@material-ui/core/TextField";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Typography from "@material-ui/core/Typography";

export default function Checkboxes() {
  const [checked,setChecked] = React.useState(false);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(event.target.checked);
  };

  return (
    <>
      <List>
        <ListItem alignItems="center">
          <Checkbox
            checked={checked}
            onChange={handleChange}
            inputProps={{ "aria-label": "primary checkbox" }}
          />
          <TextField
            fullWidth
            disabled={checked}
            label="disable when checkbox checked"
          />
        </ListItem>
        <ListItem alignItems="center">
          <Typography variant="subtitle1" style={{ marginRight: "3px" }}>
            Hello
          </Typography>
          <TextField
            fullWidth
            disabled={!checked}
            label="enable when checkbox checked"
          />
        </ListItem>
      </List>
    </>
  );
}