forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex5.html
104 lines (91 loc) · 3.13 KB
/
index5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<!-- <script type='text/javascript' src="./react.js"></script>
<script type='text/javascript' src="./react-dom.js"></script>-->
<script type='text/javascript' src="./lib/babel.js"></script>
</head>
<body>
<div>开发者工具</div>
<pre>
</pre>
<div id='example'></div>
<script type='text/babel'>
var container = document.getElementById("example");
var div = container;
var PropTypes = React.PropTypes
if (!window.ReactDOM) {
window.ReactDOM = window.React;
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a,"vs", b, a === b)
},
toEqual(b){
console.log(a,"vs", b, a +""=== b+"")
},
toThrow(b){
try{
a()
}catch(e){
console.log(e,"vs", b, e.message +""=== b+"")
}
}
}
}
let input;
let input2;
class A extends React.Component {
render() {
return (
<div>
<input id="one" ref={r => (input = input || r)} />
{this.props.showTwo && <input id="two" ref={r => (input2 = input2 || r)} />}
</div>
);
}
componentDidUpdate() {
// Focus should have been restored to the original input
expect(document.activeElement.id).toBe("one");
input2.focus();
expect(document.activeElement.id).toBe("two");
log.push("input2 focused");
}
}
const log = [];
var container = document.createElement("div");
document.body.appendChild(container);
ReactDOM.render(<A showTwo={false} />, container);
input.focus();
// When the second input is added, let's simulate losing focus, which is
// something that could happen when manipulating DOM nodes (but is hard to
// deterministically force without relying intensely on React DOM
// implementation details)
var div = container.firstChild;
["appendChild", "insertBefore"].forEach(name => {
const mutator = div[name];
div[name] = function() {
if (input) {
console.log(input, "要失去焦点")
input.blur();
expect(document.activeElement.tagName).toBe("BODY");
log.push("input2 inserted");
}
return mutator.apply(this, arguments);
};
});
expect(document.activeElement.id).toBe("one");
ReactDOM.render(<A showTwo={true} />, container);
// input2 gets added, which causes input to get blurred. Then
// componentDidUpdate focuses input2 and that should make it down to here,
// not get overwritten by focus restoration.
expect(document.activeElement.id).toBe("two");
expect(log).toEqual(["input2 inserted", "input2 focused"]);
// document.body.removeChild(container);
</script>
</body>
</html>