使用React在Netlify中看不到表单提交

时间:2019-05-08 19:17:12

标签: reactjs forms jsx netlify

这是我的错误:Request_Sticky.js:37 POST http://localhost:3000/ 404(未找到)

这是我的组件:

import React, {Component} from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class Request_Sticky extends Component {
  state = {
      modal: false,
      firstname : null,
      lastname : null,
      lessontype: null,
      age: null,
    }

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

  toggle = () => {
    console.log(this.state.modal)
    const currentState = this.state.modal;
    this.setState({ 
      modal: !currentState 
    });
  };

  encode = (data) => {
    return Object.keys(data)
        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&");
  }

  handleSubmit = (e) => {
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: this.encode({ "form-name": "request", ...this.state })
    })
      .then(() => alert("Success!"))
      .catch(error => alert(error));

    this.toggle();
    e.preventDefault();
  }

  render() {
    console.log(this.state)
    return (

      <div>
        <Button className="req_sticky-btn" onClick={this.toggle}>Request Lesson</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Request a Lesson/Availability</ModalHeader>
          <ModalBody>
            <form onSubmit={this.handleSubmit} name="request" method="post" action="/success" data-netlify="true" data-netlify-honeypot="bot-field">
              <p className="bot-field">
                <label>Don’t fill this out: <input name="bot-field"/></label>
              </p>
              <div>
                <label htmlFor="firstname">First Name: <br/></label> 
                <input onChange={this.handleChange} type="text" name="firstname"/>
              </div>
              <div>
                <label htmlFor="lastname">Last Name: <br/></label> 
                <input onChange={this.handleChange} type="text" name="lastname"/>
              </div>
              <div>
                <label htmlFor="lessontype">Lesson Type: <br/></label> 
                <input onChange={this.handleChange} type="text" name="lessontype"/>
              </div>
              <div>
                <label htmlFor="age">Age: <br/></label> 
                <input onChange={this.handleChange} type="number" name="age"/>
              </div>
              <Button type="submit" color="primary" >Submit Request</Button>
              <Button color="secondary" onClick={this.toggle}>Cancel</Button>
            </form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

export default Request_Sticky;

我成功了!提交后输出,但Netlify Form Dashboard中未显示任何内容。我之前在静态HTML页面上制作过它,但从未使用过react和jsx。任何帮助将不胜感激。

0 个答案:

没有答案