javascript - 如何在反应中使用axios（post）

Question

在反应应用程序中，我想使用 axios/post 方法将输入字段值提交到数据库，因为我是反应新手，所以我没有任何明确的想法。谁能帮我举个例子？提前致谢

我尝试了以下程序

import React, { Component } from 'react';
import axios from 'axios';

var panelStyle = {
    'max-width': '80%',
    margin: '0 auto'
}

class Register extends Component {
  constructor() {
   super();

    this.state = {
      formFields: {username: ''}
    }
  }

  render() {
    return(
     <div>
    <div class="panel panel-primary" style={panelStyle}>
      <div class="panel panel-heading">React Forum - Register</div>
      <div class="panel panel-body">
        <form onsubmit={this.formHandler(this.state.formFields)}>
          <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.username} /> <br />
          <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="[e-mail]" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="[e-mail]" /> <br />
          <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" /> <br />
          <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" /> <br /><br />
          <button class="btn btn-primary">Register Account</button>
        </form>
      </div>
    </div>
  </div>

    );
  }

  inputChangeHandler(e) {
   let formFields = {...this.state.formFields};
   formFields[e.target.name] = e.target.value;
   this.setState({
    formFields
   });
  }

  formHandler(formFields) {
   axios.post('/api/register', formFields)
     .then(function(response){
       console.log(response);
       //Perform action based on response
   })
     .catch(function(error){
       console.log(error);
       //Perform action based on error
     });
  }
}

export default Register

并在控制台中出现以下错误

index.js:2178 Warning: The tag <children> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

标签： javascriptreactjsmongoosepostmanaxios

Answer 1

改用. maxWidth_ 改为max-width使用，因为我们需要变量来防止表单请求 htmlonSubmit={(e) => this.formHandler(e, this.state.formFields)}this.formHandler(this.state.formFields)e

利用

formHandler(e, formFields) {
        e.preventDefault();
}

反而inputChangeHandler(e) {}

import React, { Component } from 'react';
import axios from 'axios';

var panelStyle = {
    maxWidth: '80%',
    margin: '0 auto'
}

这里代码可以运行。

class Register extends Component {
    constructor() {
        super();

        this.state = {
            formFields: {username: ''}
        }
    }

    render() {
        console.log(this.state)
        return(
            <div>
                <div className="panel panel-primary" style={panelStyle}>
                    <div className="panel panel-heading">React Forum - Register</div>
                    <div className="panel panel-body">
                        <form onSubmit={(e) => this.formHandler(e, this.state.formFields)}>
                            <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.username} /> <br />
                            <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="[e-mail]" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.email}/> <br />
                            <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="[e-mail]" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.confirmemail}/> <br />
                            <strong>Password:</strong> <br /> <input type="password" name="password" placeholder="********" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.password}/> <br />
                            <strong>Confirm Password:</strong> <br /> <input type="password" name="confirmpassword" placeholder="********" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.confirmpassword}/> <br /><br />
                            <button className="btn btn-primary">Register Account</button>
                        </form>
                    </div>
                </div>
            </div>

        );
    }

    inputChangeHandler(e) {
        let formFields = {...this.state.formFields};
        formFields[e.target.name] = e.target.value;
        this.setState({
            formFields
        });
    }

    formHandler(e, formFields) {
        e.preventDefault();
        axios.post('/api/register', formFields)
            .then(function(response){


                console.log(response);
                //Perform action based on response
            })
            .catch(function(error){


                console.log(error);
                //Perform action based on error
            });
    }
}

export default Register