创建带有文本字段的 Material Ui 复选框答案

【问题标题】：Create a Material Ui checkbox with textfiled创建带有文本字段的 Material Ui 复选框
【发布时间】：2021-05-25 05:46:27
【问题描述】：

如何创建一个 Material ui 复选框，选中该复选框将禁用 Textfield 并修复对齐方式？

沙盒链接：

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

【问题讨论】：

标签： reactjs checkbox material-ui textfield

【解决方案1】：

您应该使用List component provided by Material UI。给它 alignItems="center" 道具来修复对齐。然后，Material UI Checkboxes 组件接受 disabled 属性的布尔值，因此您应该在状态挂钩中将其设置为“checked”的值。这样，当 'checked' 更新时，禁用的道具也会更新。我还向 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>
    </>
  );
}

【讨论】：

【解决方案2】：

<Grid container alignContent="center" alignItems="center" direction="row" xs={12}>
    <Grid item xs="auto">
        <Checkbox />
    </Grid>
    <Grid item xs>
        <TextField fullWidth label="I am a Textbox" />
    </Grid>
</Grid>

这应该可行。

【讨论】：