node.js - 将下拉选择的值发布到 nodejs

Question

我想将下拉值从 react 发布到 NodeJS。我的反应代码：

import React from 'react'
import axios from 'axios'
export default class Inference extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       
        model: "",
 
        options: [
          { label: "Cat", value: "cat" },
          { label: "Traffic", value: "traffic" },
          { label: "Dog", value: "dog" },
        ],
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
     
      this.setState({ model: e.target.value });
      console.log("Model Selected!!");
    }



    handleSubmit(event) {
      event.preventDefault();
      const { example } = event.target;
      console.log("value", example.value);
    }
  
    componentDidMount() {
        axios
    .post('http://localhost:5000/getmodel', {
  
      model: this.state.model,
   
    })
    .then((res) => {
      // Res.data is the response from your server
      console.log(res.data);
    });

    }
  
    render() {
     
  
      const {  options } = this.state;
  
   
  
      return (
        <div className="container">
          <div className="row">
  
            <div
              className="col-6"
              style={{
                paddingBottom: "100px",
                paddingTop: "20px",
                alignItems: "center",
              }}
            >
              <label
                className=""
                style={{ paddingTop: "5px", marginTop: "40px" }}
              >
                Model
                <form method="post" action="/getmodel" onSubmit={this.handleSubmit}>
                  <select
                    className="custom-select"
                    name="example"
                    value={this.state.model}
                    onChange={this.handleChange}
                    style={{ paddingTop: "5px", marginTop: "10px" }}
                  >
                    <option>--Select--</option>
                    {options.map((option) => (
                      <option
                        value={option.value}
                        onChange={(e) => this.setState({ model: e.target.value })}
                      >
                        {option.label}
                      </option>
                    ))}
                  </select>
  
               
  
                  <button
                    type="submit"
                    class="btn btn-success"
                    style={{ marginTop: "100px" }}
                  >
                    Inference
                  </button>
                </form>
   </label>
            </div>
          </div>
        </div>
      );
    }
  }

我的nodejs代码：

  app.post('/getmodel', (req, res) => {
        // Logs course sent from front end
        console.log(req.body.model);
      });
      app.get('/', function (req, res) {
        // Cookies that have not been signed
      console.log('hello: ',req.body)
    
      })

请指导我如何将值发布到 NodeJS，以便我可以通过 req.body.model 或类似的东西获得价值。如何从反应中获取价值我需要主要动机：我想从 reactjs 到 NodeJS 获取下拉选择的值。我需要一些帮助来响应邮政编码和节点获取（对于那个邮政编码）请帮助我

标签： node.jsreactjs

Answer 1

您在 componentDidMount 中添加了错误的 axios，提交表单时应该发生 POST。componentDidMount 将在每次渲染后调用它是一个生命周期方法。请阅读反应文档以获得更好的解释尝试此代码 POST API 将在您单击提交按钮时调用，即“推理”按钮

import React from 'react'
import axios from 'axios'
export default class Inference extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       
        model: "",
 
        options: [
          { label: "Cat", value: "cat" },
          { label: "Traffic", value: "traffic" },
          { label: "Dog", value: "dog" },
        ],
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
     
      this.setState({ model: e.target.value });
      console.log("Model Selected!!");
    }

    handleSubmit(event) {
      event.preventDefault();
      axios.post('http://localhost:5000/getmodel', {
        model: this.state.model,
      })
       .then((res) => {
        // Res.data is the response from your server
        console.log(res.data);
      });
    }
  

  
    render() {
     
  
      const {  options } = this.state;
  
   
  
      return (
        <div className="container">
          <div className="row">
  
            <div
              className="col-6"
              style={{
                paddingBottom: "100px",
                paddingTop: "20px",
                alignItems: "center",
              }}
            >
              <label
                className=""
                style={{ paddingTop: "5px", marginTop: "40px" }}
              >
                Model
                <form onSubmit={this.handleSubmit.bind(this)}>
                  <select
                    className="custom-select"
                    name="example"
                    value={this.state.model}
                    onChange={this.handleChange}
                    style={{ paddingTop: "5px", marginTop: "10px" }}
                  >
                    <option>--Select--</option>
                    {options.map((option) => (
                      <option
                        value={option.value}
                        onChange={(e) => this.setState({ model: e.target.value })}
                      >
                        {option.label}
                      </option>
                    ))}
                  </select>
  
               
  
                  <button
                    type="submit"
                    class="btn btn-success"
                    style={{ marginTop: "100px" }}
                  >
                    Inference
                  </button>
                </form>
              </label>
            </div>
          </div>
        </div>
      );
    }
  }