Question

在react应用程序中，我想使用axios或postman（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

如何在反应中使用axios或邮递员

2 个答案: