代码在FF
和Chrome
上正常运行,但不会在IE
上运行。
我读到我需要在index.html中添加另一个元标记,但这并没有解决问题。 IE不支持FormData吗?我可以更新状态直接在dropHandler方法中存储名称,但想知道为什么FormData不适用于IE。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
错误:
SCRIPT438: Object doesn't support property or method 'get'
导致错误的代码:
this.state.jsonFile.get('name')
反应组件:
'use strict';
const React = require('react');
const ReactDOM = require('react-dom');
class TestCaseDialog extends React.Component {
constructor(props) {
super(props);
this.state = {jsonFile: null, loadingPage: false, loadingMessage: '', errorAlertVisible: false, errorAlertMessage: '', filePath: null};
this.dropHandler = this.dropHandler.bind(this);
}
dropHandler(file) {
var jsonFile = new FormData();
jsonFile.append('file', file[0]);
jsonFile.append('name', file[0].name);
.....
this.setState({jsonFile: jsonFile,
filePath: resp.text});
}
render() {
...
dropZone.push = <div key='file-details'>File has been uploaded: {this.state.jsonFile.get('name')}</div>;
...
return (
<div>
{this.state.loadingPage ? <LoadingPage key='loadingPage' loadingMessage={this.state.loadingMessage} /> : (
<div key="dz">
{dropZone}
</div>
)}
{errorAlert}
</div>
);
}
}
module.exports = TestCaseDialog
的index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- cerulean style -->
<!--link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css" /-->
<!--link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap-theme.min.css" /-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" />
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<!--div>
<Logged in as: <span th:text="${#authentication.name}">user</span>.
<form th:action="@{/logout}" method="post">
<input type="submit" value="Log Out"/>
</form>
</div-->
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>