Как сделать форму POST с помощью React и axios

Я уже писал, как реализовать «ajax» с помощью React. В это время я напишу, как размещать контент на сервере. Использование axios делает это проще.

Подготовка

Я подготовлю код перед основным содержанием. То есть ниже. Это не так сложно.

import React from "react"
import PropTypes from "prop-types"
import axios from "axios"
export default class FormComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render(){
    return(
       <div>
       </div>
    )
  }
}

Вид формы

Во-первых, я добавляю представление формы. То есть ниже.

import React from "react"
import PropTypes from "prop-types"
import axios from "axios"
export default class FormComponent extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  handleChange(){
    
  }
  
  postContent(){
  }
  render(){
    return(
       <div>
        <input type="text" value={this.state.text} onChange={this.handleChange.bind(this)}></input> 
        <button onClick={this.postContent.bind(this)}post</button>
       </div>
    )
  }
}

Во всяком случае, Вы можете видеть форму. Однако он не действует должным образом. Мы должны реализовать postContent и handleChange.

Как быть с размещенным контентом

Затем я вставляю содержимое в базу данных. То есть ниже.

handleChange(e){
  this.setState({text: e.target.value})
}
postContent(){
  axios.post("URL", {
    title: this.state.text,
  })
}

Если содержимое текстового поля изменяется, состояние также изменяется. Кроме того, postContents имеет роль для отправки параметра на сервер. Здесь мы можем использовать аксиомы. Метод axios — это сообщение, а имя параметра указано как «заголовок» в state.text. «URL» — это место, куда отправляются эти параметры.

Удаление содержимого после публикации

После отправки содержимого в базу данных оно не должно оставаться в текстовом поле. Поэтому мы должны их удалить. Как это сделать — ниже.

postContent(){
  self = this 
  axios.post("URL", {
    title: this.state.text
  })
  .then(function (response) {
    self.deleteText()
  })
}
deleteText(){
  this.setState({text: ""})
}

Добавляется «я = это». Почему? Это потому, что «это» становится неопределенным после «.тогда». У deleteText есть роль для замены содержимого нулевой строкой. При этом значение входного содержимого становится нулевым.

Заворачивать

Готовый код ниже.

import React from "react"
import PropTypes from "prop-types"
import axios from "axios"
export default class FormComponent extends React.Component {
constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
handleChange(){
  this.setState({text: e.target.value})   
}
  
postContent(){
  self = this 
  axios.post("URL", {
    title: this.state.text
  })
  .then(function (response) {
    self.deleteText()
  })
}
deleteText(){
  this.setState({text: ""})
}
render(){
    return(
       <div>
        <input type="text" value={this.state.text} onChange={this.handleChange.bind(this)}></input> 
        <button onClick={this.postContent.bind(this)}post</button>
       </div>
    )
  }
}

Axios упрощает соединение передней части с задней. Это отлично!

Если вы считаете, что эта статья хороша, пожалуйста, следуйте за мной!

https://twitter.com/tomoharutsutsum