Как я могу разобрать данные формы React в объект и отправить их через вызов AJAX?

Question

Я разрабатываю приложение для лотереи с 7 входами: 6 номеров пользователей и количество розыгрышей.

Я пытаюсь проанализировать все данные из полей ввода в моем объекте «результатов» и отправить этоДанные через AJAX обращаются к серверу, который их обработает.Я также использую компоненты в стиле React.

Основная проблема заключается в том, чтобы захватить все данные из полей ввода и перенести их в объект 'results'.

Я знаю, что должен добавить обработчик щелчковна мою кнопку, но я не знаю, что следует добавить к этому методу.

Вот мой код:

import React from 'react';
import styled from 'styled-components';

const InputField = styled.form`
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 100px, 0px;
    padding: 100px, 0px;
    align-items: center;
`
const InputWrapper = styled.div`
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
`
const Label = styled.label`
    display: block;
    text-align: center;
    width: 100px;
    height: 50px;
`
const Input = styled.input`
    display: block;
    text-align: center;
    width: 100px;
    height: 50px;
`
const Button = styled.button`
    border: 1px solid #23723c;
    color: #fdfdfd !important;
    letter-spacing: 3px;
    background: rgb(11, 56, 33);
    font-weight: 700;
    margin-top: 30px;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    width: 200px;
`


export default class InputArea extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      value: '',
      results : {
        numbers: [],
        draws: ''
      }
    }
  }

  /* handledrawsChange = event => {
    this.setState({
      event
    })
  } */


  drawsHandler = event => {
    this.setState({...this.state.results, draws: parseInt(event.target.value)});
    //let results = {...this.state.results}
    //results.draws = parseInt(event.target.value);
    //this.setState(results);
    console.log(this.state);
  }

  numbersHandler = event => { 
    this.setState({number: this.state.results.numbers.push(parseInt(event.target.value))});
    console.log(this.state);
  }

  componentDidMount() {
    fetch("http://localhost:8080/simulate", {
      method: "POST",
      body: this.state.results
    });
  }


  render() {
      return (
        <InputField>
          <InputWrapper>
            <Label>1st number</Label>
            <Input name="user_number_1" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>2nd number</Label>
            <Input name="user_number_2" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>3rd number</Label>
            <Input name="user_number_3" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>4th number</Label>
            <Input name="user_number_4" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>5th number</Label>
            <Input name="user_number_5" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>6th number</Label>
            <Input name="user_number_6" type="number" maxlength="2" value={this.state.value} onChange={this.numbersHandler} required></Input>
            <Label>Number of draws:</Label>
            <Input name="draw_number" type="number" value={this.state.value} onChange={this.drawsHandler} required></Input>
          </InputWrapper>
          <Button type="submit" onClick={this.drawsHandler}>Let's win!</Button>
        </InputField>
      )
  }
}