javascript - 无法在 Material UI TextField 中键入文本

Question

我有一个按钮，它的 onclick 打开一个包含 TextField 的 Material 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>
    );
}

Answer 1

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

检查working demo here并查看代码

代码片段

<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"
    }
  }
}));