我如何让我的项目搜索数据库并将结果返回到表

Question

我有一个项目，我需要 React Js 在 mssql 数据库中搜索特定查询，然后返回结果

左侧是表单，右侧是我希望将数据推送到的位置，它们位于不同的 jsx 文件中，因此我需要将数据库返回的数据放入数组 const 并将其传递给父并返回到右框子

我该怎么做呢

左框代码

import React, { Component } from 'react';

import TextInput from '../SmallBits/FormItems/TextInput';

export default class LeftBox extends Component {
    constructor(props){
        super(props);
        this.state = {
            name: '',
            forename: '',
            surname: '',
            caseID: '',
            address: ''
        }
        this.handleSurnameChange = this.handleSurnameChange.bind(this);
        this.handleForenameChange = this.handleForenameChange.bind(this);
        this.handleCaseIDChange = this.handleCaseIDChange.bind(this);
        this.handleAddressChange = this.handleAddressChange.bind(this);
    }

    handleSurnameChange(e) {
        e.preventDefault();
        this.setState({ surname: e.target.value });
    }
    handleForenameChange(e) {
        e.preventDefault();
        this.setState({ forename: e.target.value });
    }
    handleCaseIDChange(e) {
        e.preventDefault();
        this.setState({ caseID: e.target.value });
    }
    handleAddressChange(e) {
        e.preventDefault();
        this.setState({ address: e.target.value });
    }
    handleFormSubmit(e) {
        e.preventDefault();

        const formPayload = {
            name: this.state.surname,
            forename: this.state.forename
        };
        console.log('Send this in a POST request:', formPayload);
    }
    render() {

        return (
            <div className="row">
                <div className="col-md-12 well-mod well-lg">
                    <form>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Forename</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Forename'} controlFunc={this.handleForenameChange} content={this.state.forename} placeholder={'Enter Forename'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Surname</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Surname'} controlFunc={this.handleSurnameChange} content={this.state.surname} placeholder={'Enter Surname'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i>{nbsp}Case ID</span>
                                    <TextInput className="form-control" inputType={'number'} name={'CaseID'} controlFunc={this.handleCaseIDChange} content={this.state.caseID} placeholder={'Enter Case ID'} />
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-12">
                                <div className="col-md-5">
                                    <span className="input-group-addon"><i className="glyphicon glyphicon-envelope"></i>{nbsp}Email Address</span>
                                    <TextInput className="form-control" inputType={'text'} name={'Address'} controlFunc={this.handleAddressChange} content={this.state.address} placeholder={'Enter Email Address'} />
                                </div>
                            </div>
                        </div>
                        <div className="col-md-12">
                            <div className="col-md-5">
                                <button className="btn btn-sm btn-success navbar-btn pull-right glyphicon glyphicon-search">&nbsp;Search</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
    );
  }
}

右框代码

import React, { Component } from 'react';

export default class RightBox extends Component {
  render() {
    return (
        <div className="row">
            <div className="col-md-12 well-mod well-lg">
                <p>This is the Right Box</p>
            </div>
        </div>
    );
  }
}

主要内容代码

import React, { Component } from 'react';

import LeftBox from '../Boxes/LeftBox';
import RightBox from '../Boxes/RightBox';

import '../../../styles/Cust.css';

export default class MainContent extends Component {
  render() {
    return (
      <div className="ModContainer">
          <div className="col-md-12">
              <div className="col-md-7">
                  <LeftBox />
              </div>
              <div className="col-md-1-mod">

              </div>
              <div className="col-md-4">
                  <RightBox />
              </div>
          </div>
      </div>
    );
  }
}

文本输入代码

import React from 'react';

const InputHeight = {
    height:'50px',
}

const TextInput = (props) => (
    <div className="form-group">
        <input
            className="form-control"
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder}
            style={InputHeight}
            required />
    </div>
);

TextInput.propTypes = {
    inputType: React.PropTypes.oneOf(['text', 'number',     'email']).isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

export default TextInput;

我将在 sql 之前为后端放置一层 C#，这就是我正在寻找的将这个搜索按钮连接到 C# 后端的方法。

我很想在这方面提供帮助，我将不胜感激

Answer 1

您的 C# 后端需要提供 API 端点。例如，您将定义一个路由/api/search，它接受一个查询参数对象并以 JSON 格式返回结果。

在前端，您必须向后端发出 HTTP 请求，以根据查询检索结果。

您的 MainComponent 将负责调用 API 并向您的 RightBox 提供结果。