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

Posted 2023-03-05

【中文标题】创建带有文本字段的 Material Ui 复选框

【英文标题】：Create a Material Ui checkbox with textfiled

【发布时间】：2021-05-25 05:46:27

【问题描述】：

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

沙盒链接：

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

【参考方案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>

这应该可行。