reactjs只会在每秒提交时调用php脚本_Php_Html_Reactjs

reactjs只会在每秒提交时调用php脚本

php html reactjs

reactjs只会在每秒提交时调用php脚本,php,html,reactjs,Php,Html,Reactjs,我有一个用reactjs编写的html页面，名为index.html（见下文）。当按下submission按钮时，它执行一个get请求，该请求调用一个名为upload.php的php脚本（见下文）。html页面通过get请求传递php脚本要创建的文件名。当用户在“在此处输入文件名”之后的字段中键入时，该文件名由用户提供给html页面。php脚本应该按照给定的名称创建一个文件，并将字符串“asdf”放入该文件中在我使用新文件名按submit的第一次、第三次、第五次等时，这会持续成功。在我按sub

我有一个用reactjs编写的html页面，名为index.html（见下文）。当按下submission按钮时，它执行一个get请求，该请求调用一个名为upload.php的php脚本（见下文）。html页面通过get请求传递php脚本要创建的文件名。当用户在“在此处输入文件名”之后的字段中键入时，该文件名由用户提供给html页面。php脚本应该按照给定的名称创建一个文件，并将字符串“asdf”放入该文件中

在我使用新文件名按submit的第一次、第三次、第五次等时，这会持续成功。在我按submit的第二次、第四次、第六次等时，它从未成功。我想强调的是，它一直都是这样做的，也就是说，它不是随机的，它实际上是在成功生成文件和不生成文件之间交替进行的

如果你有任何想法是什么导致这一点，以及如何修复它，请让我知道。谢谢你抽出时间

下面是upload.php：

<?php
$fileName = htmlspecialchars($_GET["fileName"]);
$myfile = fopen($fileName, "w") or die("Unable to open file!");
fwrite($myfile,"asdf");
fclose($myfile);
?>

以下是index.html：

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">


class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {fileName:""}
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit(){
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {}.bind(this)
        console.log("fileName = " + this.state.fileName)
        xmlHttp.open("GET","upload.php?fileName="+this.state.fileName,true)
        xmlHttp.send(null)
    }

    render() {
        return (
        <div>
            Enter File Name Here: <input type="text" value={this.state.fileName}
                        onChange={(event) => this.setState({fileName: event.target.value})}/><br/>
            <form onSubmit={this.handleSubmit}><input type="submit" value="Submit"/></form><br/>
        </div>
        )
    }
}

ReactDOM.render(
    <NameForm />,
    document.getElementById('root')
);

</script>
</body>


类NameForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={fileName:}
this.handleSubmit=this.handleSubmit.bind（this）
}
handleSubmit（）{
var xmlHttp=new XMLHttpRequest（）；
xmlHttp.onreadystatechange=function（）{}.bind（此）
console.log（“fileName=“+this.state.fileName”）
xmlHttp.open（“GET”，“upload.php？fileName=“+this.state.fileName，true”）
xmlHttp.send（空）
}
render（）{
返回(
在此处输入文件名：this.setState（{fileName:event.target.value}）}/>



)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

@坦萨：

感谢您的评论，我在运行代码时查看了网络选项卡，事情就是这样。这些是提交test3和test4时我的网络选项卡的图片

test3未成功，但test4成功（这是因为我意外跳过了测试1）

请注意，“网络”选项卡中的消息很快就消失了，因此我无法直接查看它，我必须对其进行视频拍摄，然后对视频进行屏幕截图

如果您对这里发生的事情有任何想法，请让我知道，再次感谢。

我想将此作为评论发布，但我没有足够的声誉

当您执行第二、第四等操作时，“网络”选项卡上会出现什么？请求是否已发送？如果成功，则PHP代码可能会在某个地方失败，例如首先检查$fileName，这可能是异步函数的问题。

@fred您可能希望添加事件参数e并将e.preventDefault（）设置为handleSubmit函数，以停止重新加载页面，以便查看请求。然后在PHP调试器中检查$fileName的值。