反应：PHP 中的 formData 为空？答案

【问题标题】：React: formData empty in PHP?反应：PHP 中的 formData 为空？
【发布时间】：2018-05-09 05:17:13
【问题描述】：

我有一个奇怪的问题，任何帮助将不胜感激..

我敢肯定，实际上代码可以写得更好，所以也许我只是在这里做一些根本错误的事情，但即使是这样，我也想知道为什么这不起作用。

所以我在组件 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);

感谢您花时间阅读这面墙..

【问题讨论】：

我从标题中删除了 SOLVED。您可以在答案区域中发布自己的答案，或者删除问题。接受的答案会自动将其标记为已解决。

标签： javascript php reactjs xmlhttprequest form-data

【解决方案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'}

【讨论】：