时间戳

首页 > 解决方案 > 无法在 UI 材质表单中使用 FormData 来获取表单字段值

django - 无法在 UI 材质表单中使用 FormData 来获取表单字段值

问题描述

我只是想将我的 UI 材料表单中的数据发布到后端。

我在这里使用反应钩子。

下面是我尝试使用简单提取的代码。

  const [name, setName] = useState ('');
  const [email_id, setEmail] = useState ('');
  const [subject, setSubject] = useState ('');

  const onSubmit = (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    console.log(data);
    fetch("http://127.0.0.1:8000/api/contact/", {
      method: "POST",
      body: data,
    })
      .catch((error) => console.log("Request failed", error));
  }

这是我正在使用的材料 UI 表单

<form onSubmit={onSubmit}>
            <TextField
              autoComplete="new-password"
              id="outlined-basic"
              label="Full Name"
              variant="outlined"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
            <TextField
              id="outlined-basic"
              label="Email Address"
              variant="outlined"
              autoComplete="new-password"
              value={email_id}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
            <TextareaAutosize
              className="textbox"
              aria-label="minimum height"
              rowsMin={3}
              placeholder="Subject"
              value={subject}
              onChange={(e) => setSubject(e.target.value)}
            />
            <button>Submit</button>
          </form>

与材质 UI 表单一起使用时，它给了我一个错误，上面写着

{"name":["This field is required."],"email_id":["This field is required."],"subject":["This field is required."]}

当我使用普通的 html 表单时，它工作得非常好。但是当我尝试对 Material-UI 表单做同样的事情时，它不起作用。

如果有人可以提供帮助，那将非常有帮助。提前致谢。

标签： djangoreactjsfetch

解决方案

您需要为输入字段设置名称属性，以便它们与表单一起提交。

在 material-ui 中，您可以设置 nameTextField和任何其他输入字段的属性，例如：

<TextField
  autoComplete="new-password"
  id="outlined-basic"
  name="name"
  label="Full Name"
  variant="outlined"
  value={name}
  onChange={(e) => setName(e.target.value)}
  required
/>

推荐阅读