Javascript 表单响应值总是给出未定义的值，最终尝试推送到后端，尝试了两种方法

好的，我尝试了两种不同的方法，都给了我一个“undefined”的值，而不是用户在表单中给出的答案，如果有帮助的话，我使用的是MaterialUI表单

我的两种做法是： 1.我在最后有一个提交的按钮，这是我想做的最好的方式，然后在提交后显示数据。 2.我正在尝试将其作为用户类型，因此使用onChange，它将在UI上更新为用户类型

这两种方法都不起作用，因为即使在我提交或键入console.log时，我每次都会看到console.log说“undefined”，所以我甚至不知道是否在提取结果

我的最终目标是将表单数据转换成变量，然后将其上传到后端（用于应用程序的其他页面），并从后端将信息拉到该页面上显示，以便用户可以查看其信息

非常感谢您的帮助，谢谢

class AccountPage extends React.Component {

  constructor () {
    super()
    this.state = {
      email: '',
      socMed1: ''
    }
  }

  handleSubmit(event){
    alert("test")



  }

  handleChange (event) {
    this.setState( {[event.target.name]: event.target.value });
    console.log(event.name)
  }


  render() {
    return (



      <div>

      <h1>
        {this.email}
      </h1>



        <form action="/" method="POST" onSubmit={(e) => { e.preventDefault(); this.handleSubmit(); } }>        

        <TextField
          id="standard-name"
          style={{ margin: 15 }}
          label="Name"
          margin="normal"

          name="email"   
          value={this.state.email} 
          onChange={event => this.handleChange(event)}
        />

        <TextField
          id="standard-name"
          style={{ margin: 15 }}
          label="Location"
          margin="normal"
        />

        <TextField
          id="standard-select-socialmedia"
          select
          style={{ margin: 15 }}
          label="Select"
          SelectProps={{
            MenuProps: {},
          }}
          helperText="Please select your main social media"
          margin="normal"

          name = "socMed1"
          value={this.state.socMed1} 
          onChange={event => this.handleChange(event)}

        >

class AccountPage扩展了React.Component{
构造函数（）{
超级（）
此.state={
电子邮件：“”，
socMed1:'
}
}
handleSubmit（事件）{
警报（“测试”）
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
console.log（event.name）
}
render（）{
返回(
{this.email}
{e.preventDefault（）；this.handleSubmit（）；}}>
this.handleChange（事件）}
/>
this.handleChange（事件）}
>

假设您在底部有提交按钮，

类似（您可以使用material ui one）

this.handleSubmit（event）}/>

并尝试将其添加到您的

警报中
警报（`email:${this.state.email}，socMed1:${this.state.socMed1}`）



然后您将看到用户在字段中键入的内容


希望能有帮助！



假设您在底部有提交按钮，


类似（您可以使用material ui one）

this.handleSubmit（event）}/>



并尝试将其添加到您的
警报中
警报（`email:${this.state.email}，socMed1:${this.state.socMed1}`）



然后您将看到用户在字段中键入的内容


希望有帮助！
带有表单的功能组件。签出只需做一些研究，这只是HTML功能。如果您想使用类组件，您可以继续，但只需在提交表单中使用“即可。handleSubmit

import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const Demo = () => {
  const handleSubmit = event => {
    const formData = new FormData(event.target);
    //does not resets the form
    event.preventDefault();
    // accessing each values
    for (var [key, value] of formData.entries()) {
      console.log(key, value);
    }
    // posting you values to api
    fetch("/api/form-submit-url", {
      method: "POST",
      body: formData
    });
  };
  return (
    <React.Fragment>
      <form onSubmit={handleSubmit}>
        <div style={{ display: "flex", flexDirection: "column" }}>
      // names are important because this will be treated as a key value pair in handle submit.
          <TextField id="standard-basic" name="user" label="user" />
          <TextField id="standard-basic" name="email" label="email" />
          <TextField id="standard-basic" name="password" label="password" />
          <Button type="submit" variant="contained">
            Submit
          </Button>
        </div>
      </form>
    </React.Fragment>
  );
};

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
常量演示=（）=>{
const handleSubmit=事件=>{
const formData=新formData（event.target）；
//不重置窗体
event.preventDefault（）；
//访问每个值
for（formData.entries（）的var[key，value]{
console.log（键、值）；
}
//将您的值发布到api
获取（“/api/form提交url”{
方法：“张贴”，
正文：formData
});
};
返回(
//名称很重要，因为它将在句柄提交中作为键值对处理。
提交
);
};
带有表单的功能组件。签出只需做一些研究，这只是HTML功能。如果您想使用类组件，可以继续，但只需在onSubmit表单中使用“即可。handleSubmit

import React from "react";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const Demo = () => {
  const handleSubmit = event => {
    const formData = new FormData(event.target);
    //does not resets the form
    event.preventDefault();
    // accessing each values
    for (var [key, value] of formData.entries()) {
      console.log(key, value);
    }
    // posting you values to api
    fetch("/api/form-submit-url", {
      method: "POST",
      body: formData
    });
  };
  return (
    <React.Fragment>
      <form onSubmit={handleSubmit}>
        <div style={{ display: "flex", flexDirection: "column" }}>
      // names are important because this will be treated as a key value pair in handle submit.
          <TextField id="standard-basic" name="user" label="user" />
          <TextField id="standard-basic" name="email" label="email" />
          <TextField id="standard-basic" name="password" label="password" />
          <Button type="submit" variant="contained">
            Submit
          </Button>
        </div>
      </form>
    </React.Fragment>
  );
};

从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@物料界面/核心/按钮”导入按钮；
常量演示=（）=>{
const handleSubmit=事件=>{
const formData=新formData（event.target）；
//不重置窗体
event.preventDefault（）；
//访问每个值
for（formData.entries（）的var[key，value]{
console.log（键、值）；
}
//将您的值发布到api
获取（“/api/form提交url”{
方法：“张贴”，
正文：formData
});
};
返回(
//名称很重要，因为它将在句柄提交中作为键值对处理。
提交
);
};