Получение данных из базы данных SQL Server в событии onClick в React с использованием vs2017

Question

Я нахожусь в начале своего программирования, и это моя обязанность кодировать веб-страницу форума с логином. После входа в систему я должен поставить пришедший контент, и он должен быть редактируемым, но я все еще в начале. Я был бы очень рад, если кто-то может помочь, потому что сейчас мне нужно поместить данные в базу данных (я могу получить данные из базы данных, я могу их утешить)

Это действительно сложное кодирование :(

Но как получить форму для базы данных: /

Это файл TSX на стороне интерфейса.

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
//import { Link, NavLink } from 'react-router-dom';

export class SignUp extends React.Component<RouteComponentProps<{}>, {}> {

    constructor(props: RouteComponentProps<{}> | undefined) {
        super(props);
        this.state = {
            name: '',
            surname: '',
            username: '',
            email: '',
            password: ''
        };
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleSurnameChange = this.handleSurnameChange.bind(this);
        
    }
    handleNameChange(e: { preventDefault: () => void; target: { value: any; }; }) {
        e.preventDefault();
        this.setState({ name: e.target.value });
    }
    handleSurnameChange(e: { preventDefault: () => void; target: { value: any; }; }) {
        e.preventDefault();
        this.setState({ surname: e.target.value });
    }

    handleSubmit(e: any) {
        e.preventDefault();
        const formKayit = {
            name: this.state.name,
            surname: this.state.surname
        };

        console.log("uye oldunuz", formKayit);
    }


    public render() {
        return (
            <div>
            <h1>We are glad to see you here. </h1>
            <form >
                <label>
                        Name:
                    <input className="form-control" type="text" onChange={(e) => { this.handleNameChange(name); }} //name="Name" value={this.state.Name} onChange={this.handleChange.bind(this)} 
                    />
                </label>
                <div>
                    <label>
                        Surname:
                    <input className="form-control" type="text" onChange={(e) => { this.handleSurnameChange(e); }} //name="Surname" value={this.state.Surname} onChange={this.handleChange.bind(this)} 
                            />
                    </label>
                </div>
                <div>
                    <label>
                        Username:
                    <input className="form-control" type="text" //name="Username" value={this.state.Username} onChange={this.handleChange.bind(this)} 
                        />
                    </label>
                </div>
                <div>
                    <label>
                        E-mail:
                    <input className="form-control" type="text" //name="Surname" value={this.state.Surname} onChange={this.handleChange.bind(this)} 
                        />
                    </label>
                </div>
                <label>
                    Password:
                    <input className="form-control" type="password" //name="Password" value={this.state.Password} onChange={this.handleChange.bind(this)}
                    />
                </label>
                <div>
                        <button onClick={(e) => { this.handleSubmit(e); }} className="btn">SignUp </button>
                </div>
            </form>

            </div>

        );
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>