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>

这只是表格的一小部分。当我从主页上传它时，它有多个相似的字段和形式DOES WORK，但我也想从我已经制作的模态发送这个表单，但是当我从模态发送到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'}

React：PHP中的formData为空？

1 个答案: