無法在材質 UI TextField 中鍵入文本

Question

我有一個按鈕，其 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>
    );
}

Answer 1

它應該工作。 做一些styles，添加label，占位符等。

在此處查看工作演示並查看代碼

代碼片段

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