如何在反应中使用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="me@example.com" /> <br />
          <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" /> <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.

Answer 1

使用maxWidth 代替max-width。 使用onSubmit={(e) => this.formHandler(e, this.state.formFields)} 而不是this.formHandler(this.state.formFields) 因为我们需要变量e 来防止表单请求html

使用

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="me@example.com" onChange={(e) => this.inputChangeHandler.call(this, e)} value={this.state.formFields.email}/> <br />
                            <strong>Confirm Email:</strong> <br /> <input type="email" name="confirmemail" placeholder="me@example.com" 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

Answer 2

这就是我使用 create-react-app 设置它的方式。我喜欢使用async/await。 handleSubmit 和 handleChange 函数将随事件自动被调用，并且很容易从 handleSubmit 内部引用状态以获取要在发布请求中发送的数据。有时，别无选择，只能在 JSX 中使用回调风格的函数——比如(e) => this.whatever(e, this.state.whatever)，但如果可以避免，我想避免它。不相关，但您可以在渲染中从formFields 状态中提取用户名、电子邮件等，以节省大量输入 this.state 的麻烦。

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

    class Register extends Component {

      state = {
        formFields: { user: '', email: '' }
      }  

      handleSubmit = async e => {
        e.preventDefault()
        const { formFields } = this.state
        try {
          let response = await axios.post('/api/register', formFields)
          // handle response
        } catch (error) {
          // handle error
        }

      }

      handleChange = e => {
        const { formFields } = this.state
        formFields[e.target.name] = e.target.value
        this.setState({ formFields })
      }

      render() {
        const { username, email } = this.state.formFields
        return () {
          <div>
            <form onSubmit={this.handleSubmit}>
               <strong>Username:</strong> <br /> <input type="text" name="username" placeholder="Nathaniel" onChange={this.handleChange} value={username} /> <br />
               <strong>Email:</strong> <br /> <input type="email" name="email" placeholder="me@example.com" onChange={this.handleChange} value={email}/> <br />
            <button>Register Account</button>
            </form>
          </div>
        }
      }
    }

export default Register