jQueryを使わずにReactでフォームを送信するAJAX

Question

私はReactで構築している静的サイトでformspreeを使用してフォームを送信しようとしています。私は近づいたが、今は完全に失われている。

私はES6 Promise機能を使用しようとしていますが、完了方法はわかりません。すべてのヘルプをいただければ幸いです

Object {name: undefined, email: undefined, message: undefined} 

：

import React from 'react'; 
import { Link } from 'react-router'; 


import { prefixLink } from 'gatsby-helpers'; 
import { config } from 'config'; 

import Headroom from 'react-headroom'; 

import Nav from './nav.js'; 

import '../css/main.scss'; 

import Modal from 'boron/DropModal'; 

import {Input, Label,Textarea, Button} from 're-bulma'; 

const modalStyle = { 
    minHeight: '500px', 
    backgroundColor: '#303841' 
}; 

const backdropStyle = { 
    backgroundColor: '#F6C90E' 
}; 

const contentStyle = { 
    backgroundColor: '#303841', 
    padding: '3rem' 
}; 

const gotcha = { 
    display: 'none' 
}; 

const email = 'https://formspree.io/dillonraphael@gmail.com'; 




export default class RootTemplate extends React.Component { 
    static propTypes = { 
    location: React.PropTypes.object.isRequired, 
    children: React.PropTypes.object.isRequired, 
    } 

    static contextTypes = { 
    router: React.PropTypes.object.isRequired, 
    } 

    constructor() { 
    super(); 
    this.showModal = this.showModal.bind(this); 
    } 

    showModal() { 
    this.refs.modal.show(); 
    } 

    formSubmit(e) { 
    e.preventDefault(); 
    let data = { 
     name: this.refs.name.value, 
     email: this.refs.email.value, 
     message: this.refs.message.value 
    } 
    return new Promise((resolve, reject) => { 
     const req = new XMLHttpRequest(); 
     req.open('POST', email); 
    }); 
    console.log(data); 
    } 

    render() { 
    return (
     <div> 
     <Headroom> 
      <Nav showModal={this.showModal}/> 
     </Headroom> 
     <Modal ref="modal" modalStyle={modalStyle} contentStyle={contentStyle} backdropStyle={backdropStyle}> 
      <form ref='contact_form' onSubmit={::this.formSubmit}> 
      <Label>Name:</Label> 
      <Input ref="name" /> 
      <Label>Email:</Label> 
      <Input ref="email" type="email"/> 
      <Label>Message:</Label> 
      <Textarea ref="message" /> 
      <Input type="text" name="_gotcha" style={gotcha}/> 
      <Button buttonStyle="isOutlined" color="isWarning">Submit</Button> 
      </form> 
     </Modal> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

私も現在、このエラーが出る：

は、ここに私の現在のコードです。本当に学ぶことを試みる。

Answer 1

あなたはfetchを試すことができます。

例の約束のコードは：

var form = document.querySelector('form') 


function checkStatus(response) { 
    if (response.status >= 200 && response.status < 300) { 
    return response 
    } else { 
    var error = new Error(response.statusText) 
    error.response = response 
    throw error 
    } 
} 

function parseJSON(response) { 
    return response.json() 
} 

    fetch('/users',{ 
     method: 'POST', 
     body: new FormData(form) 
     }) 
     .then(checkStatus) 
     .then(parseJSON) 
     .then(function(data) { 
     console.log('request succeeded with JSON response', data) 
     }).catch(function(error) { 
     console.log('request failed', error) 
     }) 

Answer 2

私が間違っているかもしれないが、私が見るものから、あなたはやっとここに約束を使用する必要があります。

formSubmit = (e) => { 
    e.preventDefault(); 
    const {name, email, message} = this.refs 
    const formData = new FormData(); 
    formData.append("name", name.value); 
    formData.append("email", email.value); 
    formData.append("message", message.value); 
    const req = new XMLHttpRequest(); 
    req.open('POST', url); 
    req.send(formData); 
    } 

代わりにこれを試してみて、私はpreviosleyは、私はついにそれを考え出し cosnt email urlへ

Answer 3

を定義し、名前を変更。みんなに助けてくれてありがとう。主な問題は、re-bulma npmライブラリが<Input />コンポーネントの「ref」を許可しなかったことです。だから、私は通常のhtml入力を選んだ。私はAxiosライブラリを使ってリクエストを処理しています。この私の更新されたコードは、これが誰かを助けることを願っています

formSubmit (e){ 
    e.preventDefault(); 

    let form = document.querySelector('form') 

    let name = this.nameRef.value 
    let email = this.emailRef.value 
    let message = this.messageRef.value 


    axios.post(url, { 
     data: { 
     name: name, 
     email: email, 
     message: message 
     } 
    }) 
    .then(function (response) { 
     console.log(response); 
     form.reset() 
    }) 
    .catch(function(error) { 
     console.log(error); 
     form.reset() 
    }); 
    } 

とフォームのマークアップ：私は[Promise` `に関するMDNドキュメント]を読むことをお勧めします

<form onSubmit={::this.formSubmit}> 
    <div className="formInput"> 
     <input type="text" placeholder="Name" ref={(input) => this.nameRef = input} /> 
     </div> 
     <div className="formInput"> 
     <input type="email" placeholder="Email" ref={(input)=> this.emailRef = input} /> 
     </div> 
     <div className="formInput"> 
     <textarea placeholder="Message" ref={(input) => this.messageRef = input} /> 
     </div> 
     <input type="text" name="_gotcha" style={gotcha}/> 
     <div className="formInput"> 
     <Button buttonStyle="isOutlined" color="isWarning">Submit</Button> 
     </div> 
    </form>