Блог

Следуя этому руководству: https://www.youtube.com/watch?v=ngc9gnGgUdAamp;t=15s

через 57 минут при попытке заполнить раздел «Форма» я правильно скопировал код, но моя форма не отображается в моем приложении.

вот как это должно выглядеть: правильное отображение

и вот что я получаю: форма не отображается

Я полагаю, что это простая организационная ошибка, поскольку я не выдаю никаких ошибок в консоли.

Я использую фреймворк React «material-ui / core».

В верхней части моего файла при импорте текстовое поле отображается как серое или неиспользуемое, несмотря на то, что оно находится в моем файле.

ниже мой form.js файл:

     import React, { useState } from "react";
import { TextField, Button, Typography, Paper } from "@material-ui/core";
import FileBase from "react-file-base64";
import { useDispatch } from "react-redux";

import useStyles from "./styles";
import { createPost } from "../../actions/posts";

const Form = () => {
  const [postData, setPostData] = useState({
    creator: "",
    title: "",
    message: "",
    tags: "",
    selectedFile: "",
  });
  const classes = useStyles();
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();

    dispatch(createPost(postData));
  };

  const clear = () => {};

  return (
    <Paper className={classes.paper}>
      <form
        autoComplete="off"
        noValidate
        className={`${classes.root} ${classes.form}`}
        onSubmit={handleSubmit}
      >
        <Typography variant="h6">Creating a Memory</Typography>
        <textField
          name="creator"
          variant="outlined"
          label="Creator"
          fullWidth
          value={postData.creator}
          onChange={(e) =>
            setPostData({ ...postData, creator: e.target.value })
          }
        />
        <textField
          name="title"
          variant="outlined"
          label="Title"
          fullWidth
          value={postData.title}
          onChange={(e) => setPostData({ ...postData, title: e.target.value })}
        />
        <textField
          name="message"
          variant="outlined"
          label="Message"
          fullWidth
          value={postData.message}
          onChange={(e) =>
            setPostData({ ...postData, message: e.target.value })
          }
        />
        <textField
          name="tags"
          variant="outlined"
          label="Tags"
          fullWidth
          value={postData.tags}
          onChange={(e) => setPostData({ ...postData, tags: e.target.value })}
        />
        <div className={classes.fileInput}>
          <FileBase
            type="file"
            multiple={false}
            onDone={(base64) =>
              setPostData({ ...postData, selectedFile: base64 })
            }
          />
        </div>
        <Button
          className={classes.buttonSubmit}
          variant="contained"
          color="primary"
          size="large"
          type="submit"
          fullWidth
        >
          Submit
        </Button>
        <Button
          variant="contained"
          color="secondary"
          size="small"
          onClick={clear}
          fullWidth
        >
          Clear
        </Button>
      </form>
    </Paper>
  );
};

export default Form;
 

Я мега новичок, поэтому я очень благодарен за любую помощь или рекомендации.
Если я могу предоставить еще какую-либо полезную информацию, пожалуйста, дайте мне знать!

Попробуйте TextField , с большой буквы T .

В react, если вы используете имя тега, начинающееся со строчной буквы, оно будет помещено непосредственно в DOM, вместо того, чтобы рассматривать его как компонент react.

В старой версии вы должны иметь возможность щелкнуть правой кнопкой мыши на своей форме, проверить элемент и просмотреть textField s в вашем HTML.