React：formDataはPHPで空ですか？

Question

私は奇妙な問題を抱えており、助けていただければ幸いです。

実際にはコードは良く書かれていますが、確かに私はここで根本的に何か間違っていますが、なぜこれがうまくいかないのか知りたいのですが。

だから私は、コンポーネントAddHouseで、このような入力フィールドを持つフォームがあります。フォームのほんの一部だ

<form name="myForm" encType="multipart/form-data" onSubmit={this.uploadForm}> 
       <input type="text" name="city" placeholder={condition ? 'City' : this.props.placeholders.city} {...(condition ? {required:true} : {})}></input><br></br> 
       <input type="text" name="address" placeholder={condition ? 'Address' : this.props.placeholders.address} {...(condition ? {required:true} : {})}></input><br></br> 

を。これには複数の似たフィールドがあり、メインページからアップロードするとフォームは機能しますが、私が作成したモーダルからこのフォームを送信したいのですが、モーダルからPHPファイルにアップロードするとき$ _POST配列にはキーのみが含まれています。条件はハウスデータをプレースホルダとして与え、フィールドを必要とせず、これらの条件の両方を実行するためのものです。

フォームがアップロードされると、この機能は、AddHouseコンポーネントに呼び出されます。親コンポーネントで

uploadForm(e){ 
    e.preventDefault(); 
    this.setState({loading: true, errorMsg: false, successMsg: false}); 
    var form = document.forms.namedItem("myForm"); 
    var formData = new FormData(form); 

    this.props.addHouse(formData, function(bool){ 
     if(bool){ 
      form.reset(); 
      this.setState({successMsg: true, errorMsg: false, loading: false, preview: null}); 
     } 
     else{ 
      this.setState({errorMsg: true, successMsg: false, loading: false}); 
     } 
    }.bind(this)); 
} 

がaddHouse：

addHouse(formData, fn){ 
    var dashboard = this; 
    var request = new XMLHttpRequest(); 

    var script = this.state.modal ? "php/edit_house.php" : "php/add_house.php"; 
    this.setState({loading: true}); 
    request.open("POST", script, true); 
    request.onreadystatechange = function(){ 
     if(request.readyState === 4){ 
      if(request.status === 200 && request.responseText == 1){ 
       dashboard.setState({loading: false}); 
       fn(true); 
      } 
      else{ 
       console.log(request.responseText); 
       dashboard.setState({loading: false}); 
       fn(false); 
      } 
     } 
    }; 
    request.send(formData); 

この壁紙を読んでいただきありがとうございました...

Answer 1

申し訳ありません。これを解決しました。私は別の名前でフォームを参照しなければならなかったので、私は次の行を変更し、それが動作：

var form = document.forms.namedItem("myForm"); 

var form = this.props.placeholders === undefined ? document.forms.namedItem("myForm") : document.forms.namedItem("myForm2"); 

して、フォームを変更するにはrenderメソッドに条件を追加しました名前はレンダリングの場所によって異なります。

form name={condition ? 'myForm' : 'myForm2'}