无法在材质 UI TextField 中键入文本

Posted 2023-02-25

【中文标题】无法在材质 UI TextField 中键入文本

【英文标题】：Unable to type text inside of material UI TextField

【发布时间】：2020-06-25 00:18:31

【问题描述】：

我有一个按钮，其 onclick 会打开一个包含 TextField 的材质 UI 对话框。但是，我无法单击 TextField 输入任何内容。此外，当我单击按钮打开对话框时，我收到错误“findDOMNode 在 StrictMode 中已弃用”。似乎这不应该影响基于其他答案的功能。

如果我将其更改为包含正常输入字段的 div，一切正常，因此这似乎是 Material UI 问题。

const [open, setOpen] = useState(false);
const [body, setBody] = useState("");
const [errors, setErrors] = useState();


const handleOpen = () => 
    setOpen(true);
;

const handleClose = () => 
    props.clearErrors();
    setOpen(false);
    setErrors();
;

const handleChange = (e) => 
    setBody(e.target.value);
;

const handleSubmit = (e) => 
    e.preventDefault();
    props.newPost( body: body );
;

const  UI:  loading  = props;

    return (
      <React.Fragment>
        <button onClick=handleOpen>
          <AddIcon />
        </button>
        <Dialog
          open=open
          onClose=handleClose
          fullWidth
          maxWidth="sm">
          <button onClick=handleClose>
            <CloseIcon />
          </button>
          <DialogTitle>Create a new post</DialogTitle>
          <DialogContent>
            <form onSubmit=handleSubmit>
              <TextField
                name="body"
                type="text"
                multiline
                rows="3"
                onChange=handleChange
                fullWidth
              />
              <button
                type="submit"
                variant="contained"
                color="primary"
              >
                Submit
                loading && (
                  <CircularProgress/>
                )
              </button>
            </form>
          </DialogContent>
        </Dialog>
      </React.Fragment>
    );

【问题讨论】：

我建议您可能有一些冲突的 CSS。因此，至少我遇到了与您所描述的类似的问题。尝试检查相关元素上的 CSS，看看你是否能找到一些由你自己的 CSS 强加的样式，这可能是负责任的。

很遗憾这个组件目前没有样式表：/

【参考方案1】：

它应该工作。做一些样式，添加标签，占位符等。

检查working demo here 并查看代码

代码 sn-p

<React.Fragment>
      <button onClick=handleOpen>Add</button>

      <Dialog open=open onClose=handleClose fullWidth maxWidth="sm">
        <button onClick=handleClose>X</button>
        <DialogTitle>Create a new post</DialogTitle>
        <DialogContent>
          <form className=classes.root onSubmit=handleSubmit>
            <TextField
              name="body"
              label="Enter some text"
              multiline
              rows="3"
              onChange=handleChange
              fullWidth
              placeholder="placeholder"
            />
            <button type="submit" variant="contained" color="primary">
              Submit
              false && <CircularProgress />
            </button>
          </form>
        </DialogContent>
      </Dialog>
    </React.Fragment>

风格

const useStyles = makeStyles(theme => (
  root: 
    "& > *": 
      margin: theme.spacing(1),
      width: "50ch"
    
  
));

【讨论】：

是的，你是对的。完全错过了盒子的底部，因为它都被揉皱了。感谢您的帮助。

太棒了。 .很高兴听到这个消息...您能否考虑接受答案并投票...