Reactフォームが送信されないのはなぜですか?

Sadie

私はこのチュートリアルをオフラインで使用しましたが、これがあります:

import React from 'react';
import '../Normalize.css';
import '../App.css';
import $ from 'jquery';

class ReactFormLabel extends React.Component {
constructor(props) {
  super(props);
}
render() {
    return(
     <label htmlFor={this.props.htmlFor}>{this.props.title}</label>
    )
  }
}

class ReactForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    name: '',
    email: '',
    subject: '',
    message: ''
  }
}

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

handleSubmit = (e, message) => {
  e.preventDefault();

  let formData = {
    formSender: this.state.name,
    formEmail: this.state.email,
    formSubject: this.state.subject,
    formMessage: this.state.message
  }

  if (formData.formSender.length < 1 || formData.formEmail.length < 1 || formData.formSubject.length < 1 || formData.formMessage.length < 1) {
  return false;
  }

  $.ajax({
    url: '/some/url',
    dataType: 'json',
    type: 'POST',
    data: formData,
    success: function(data) {
    if (window.confirm('Thank you for your message. Can I erase the form?')) 
{
 document.querySelector('.form-input').val('');
}
},
error: function(xhr, status, err) {
  console.error(status, err.toString());
  alert('There was some problem with sending your message.');
 }
});

this.setState({
  firstName: '',
  lastName: '',
  email: '',
  subject: '',
  message: ''
});
};

render() {
  return(
    <form className='react-form' onSubmit={this.handleSubmit}>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formName' title='Full Name:' />
        <input id='formName' className='form-input' name='name' type='text' required onChange={this.handleChange} value={this.state.name} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formEmail' title='Email:' />
        <input id='formEmail' className='form-input' name='email' type='email' required onChange={this.handleChange} value={this.state.email} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formSubject' title='Subject:'/>
        <input id='formSubject' className='form-input' name='subject' type='text' required onChange={this.handleChange} value={this.state.subject} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formMessage' title='Message:' />
        <textarea id='formMessage' className='form-textarea' name='message' required onChange={this.handleChange}></textarea>
      </fieldset>
      <div className='form-group'>
        <input id='formButton' className='btn' type='submit' placeholder='Send message' />
      </div>
    </form>
    )
  }
 };

export default ReactForm;

私はそれがこのセクションと関係があると思います:

$.ajax({
    url: '/some/url',
    dataType: 'json',
    type: 'POST',
    data: formData,
    success: function(data) {
    if (window.confirm('Thank you for your message. Can I erase the form?')) 
{
 document.querySelector('.form-input').val('');
}

URLはありますが、どこに送信すればよいかわかりませんか?私がここで見落としている非常に単純なものはありますか?正常にレンダリングされ、正常に検証され、送信されないだけです。私はこのチュートリアルに従いました:https//blog.alexdevero.com/insanely-easy-simple-react-form-tutorial/

ありがとう!

wnamen

次のように、関数をコンポーネントにバインドする必要があります。

class ReactForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: '',
            email: '',
            subject: '',
            message: ''
        } 

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

また、フォームの詳細を示す反応ドキュメントは次のとおりです:https//facebook.github.io/react/docs/forms.html

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

このフォームが送信されないのはなぜですか?

分類Dev

Reactフォームの送信値が定義されていないのはなぜですか?

分類Dev

JavaScript:フォームが送信されないのはなぜですか?

分類Dev

JavaScriptフォームが送信されないのはなぜですか?

分類Dev

フォームが送信されないのはなぜですか

分類Dev

送信ボタンを押してもフォームが送信されないのはなぜですか?

分類Dev

PHP / HTMLフォームからデータが送信されないのはなぜですか

分類Dev

フォームが送信または投稿されないのはなぜですか

分類Dev

Meteorアプリで送信フォームが実行されないのはなぜですか?

分類Dev

これがReactフォームのonSubmit関数でスコープされないのはなぜですか?

分類Dev

フォームの値が更新されないのはなぜですか?

分類Dev

送信ボタンの名前が「送信」の場合、フォームが送信されないのはなぜですか?

分類Dev

form.actionがフォームから送信されるものと異なるのはなぜですか?

分類Dev

PHPの連絡先フォームから送信されたメールがHTML形式になっていないのはなぜですか?

分類Dev

フラスコ:フォームが送信されたときにAJAXが呼び出されないのはなぜですか?

分類Dev

フォームにenctype = "multipart / form-data"があるのに、ファイルがPOST変数で送信されないのはなぜですか

分類Dev

フォームの選択入力フィールドがサーバーに送信されないのはなぜですか?

分類Dev

フォームajax送信で他のajax関数が呼び出されるのはなぜですか?

分類Dev

このJavascript関数を呼び出すとフォームが送信されるのはなぜですか?

分類Dev

HTMLでネストされたフォームが許可されないのはなぜですか?

分類Dev

フォームの送信時にボタンがクリックされるのはなぜですか?

分類Dev

ユーザーが登録フォームを送信したときにregisterSubmitが実行されないのはなぜですか?春

分類Dev

同じフォームを指定された回数送信する:このコードが機能しないのはなぜですか?

分類Dev

ネストされたフォームがまったく表示されないのはなぜですか?

分類Dev

送信ボタンがフォームデータを送信しないのはなぜですか?-HTML /ノード

分類Dev

リンク付きのフォームを送信しても、入力テキストの値が変更されないのはなぜですか?

分類Dev

Xamarinフォームを使用するiOSアプリでFontAwesomeが表示されないのはなぜですか?

分類Dev

お問い合わせフォームから送信されたメッセージがすべてスパムボックスに送信されるのはなぜですか?私のコードの何が問題になっていますか?

分類Dev

モーダルのフォームアクションが更新されないのはなぜですか?

Related 関連記事

  1. 1

    このフォームが送信されないのはなぜですか?

  2. 2

    Reactフォームの送信値が定義されていないのはなぜですか?

  3. 3

    JavaScript:フォームが送信されないのはなぜですか?

  4. 4

    JavaScriptフォームが送信されないのはなぜですか?

  5. 5

    フォームが送信されないのはなぜですか

  6. 6

    送信ボタンを押してもフォームが送信されないのはなぜですか?

  7. 7

    PHP / HTMLフォームからデータが送信されないのはなぜですか

  8. 8

    フォームが送信または投稿されないのはなぜですか

  9. 9

    Meteorアプリで送信フォームが実行されないのはなぜですか?

  10. 10

    これがReactフォームのonSubmit関数でスコープされないのはなぜですか?

  11. 11

    フォームの値が更新されないのはなぜですか?

  12. 12

    送信ボタンの名前が「送信」の場合、フォームが送信されないのはなぜですか?

  13. 13

    form.actionがフォームから送信されるものと異なるのはなぜですか?

  14. 14

    PHPの連絡先フォームから送信されたメールがHTML形式になっていないのはなぜですか?

  15. 15

    フラスコ:フォームが送信されたときにAJAXが呼び出されないのはなぜですか?

  16. 16

    フォームにenctype = "multipart / form-data"があるのに、ファイルがPOST変数で送信されないのはなぜですか

  17. 17

    フォームの選択入力フィールドがサーバーに送信されないのはなぜですか?

  18. 18

    フォームajax送信で他のajax関数が呼び出されるのはなぜですか?

  19. 19

    このJavascript関数を呼び出すとフォームが送信されるのはなぜですか?

  20. 20

    HTMLでネストされたフォームが許可されないのはなぜですか?

  21. 21

    フォームの送信時にボタンがクリックされるのはなぜですか?

  22. 22

    ユーザーが登録フォームを送信したときにregisterSubmitが実行されないのはなぜですか?春

  23. 23

    同じフォームを指定された回数送信する:このコードが機能しないのはなぜですか?

  24. 24

    ネストされたフォームがまったく表示されないのはなぜですか?

  25. 25

    送信ボタンがフォームデータを送信しないのはなぜですか?-HTML /ノード

  26. 26

    リンク付きのフォームを送信しても、入力テキストの値が変更されないのはなぜですか?

  27. 27

    Xamarinフォームを使用するiOSアプリでFontAwesomeが表示されないのはなぜですか?

  28. 28

    お問い合わせフォームから送信されたメッセージがすべてスパムボックスに送信されるのはなぜですか?私のコードの何が問題になっていますか?

  29. 29

    モーダルのフォームアクションが更新されないのはなぜですか?

ホットタグ

アーカイブ