使用Reactjs的Axios发布表单

使用Reactjs的Axios发布表单,第1张

使用Reactjs的Axios发布表单

每个状态的eventHandler。有什么办法可以做得更好?是的,它会像这样工作

import React, { Component } from 'react';class UserForm extends Component {  constructor() {    super();    this.state = {      fname: '',      lname: '',      email: '',    };  }  onChange = (e) => {        this.setState({ [e.target.name]: e.target.value });  }  render() {    const { fname, lname, email } = this.state;    return (      <form>        <input          type="text"          name="fname"          value={fname}          onChange={this.onChange}        />        <input          type="text"          name="lname"          value={lname}          onChange={this.onChange}        />        <input          type="text"          name="email"          value={email}          onChange={this.onChange}        />      </form>    );  }}

并且关于提交表单的问题,您的axios帖子将像这样工作

onSubmit = (e) => {    e.preventDefault();    // get our form data out of state    const { fname, lname, email } = this.state;    axios.post('/', { fname, lname, email })      .then((result) => {        //access the results here....      });  }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5020161.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-15

发表评论

登录后才能评论

评论列表(0条)

保存