значения отклика формы всегда выделяются неопределенными, пытаясь в конце концов создать sh для бэкэнда, попробовал 2 способа

Question

Хорошо, поэтому я попытался сделать это двумя разными способами, и оба дают мне значение «неопределенный» вместо ответа, который пользователь вводит в форму, я использую материальные формы пользовательского интерфейса, если это помогает.

Я сделал 2 способа: 1. В конце у меня есть кнопка для отправки, которая является предпочтительным способом, которым я хочу это сделать, и затем отображать данные после. 2. Я пробую это как пользовательские типы, так что использую onChange, и он будет обновлять пользовательский интерфейс в качестве пользовательских типов.

Ни один из способов не сработал, потому что даже когда я отправляю или печатаю, я получаю 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)}

        >

Answer 1

функциональный компонент с формой. Оформить заказ Просто проведите исследование, это всего лишь HTML функциональность. если вы хотите использовать компонент класса, вы можете go впереди, но просто используйте " this.handleSubmit в форме onSubmit будет работать

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

Answer 2

Если у вас есть кнопка отправки внизу, что-то вроде (вы можете использовать материал UI один) <button onSubmit={(event) => this.handleSubmit(event)} /> и попробуйте добавить это к вашему alert alert(`email: ${this.state.email}, socMed1: ${this.state.socMed1}`) тогда вы увидите, что пользователь набрал в поле Надеюсь, это поможет!