forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex8.html
151 lines (134 loc) · 4.49 KB
/
index8.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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 src="./test/react.development.js"></script>
<script src="./test/react-dom.development.js"></script> -->
<script src="./lib/babel.js"></script>
</head>
<body>
<div>这个默认会被清掉</div>
<p><input id="a" value="111"/><input id="b" value="222"/><input id="c" value="333"/><span tabindex="-1" id="span">333</span></p>
<p><input id="d" value="444"/><input id="e" value="555"/><input id="f" value="666"/></p>
<blockquote id='example'></blockquote>
<pre>
</pre>
<script type='text/babel'>
var container = document.getElementById("example")
var div = container
var PropTypes = React.PropTypes
if(!window.ReactDOM){
window.ReactDOM = 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+"")
}
}
}
}
/*
var appRoot = document.createElement("div")
var modalRoot = document.createElement("div")
document.body.appendChild(appRoot)
document.body.appendChild(modalRoot)
class Modal extends React.Component {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
// The portal element is inserted in the DOM tree after
// the Modal's children are mounted, meaning that children
// will be mounted on a detached DOM node. If a child
// component requires to be attached to the DOM tree
// immediately when mounted, for example to measure a
// DOM node, or uses 'autoFocus' in a descendant, add
// state to Modal and only render the children when Modal
// is inserted in the DOM tree.
modalRoot.appendChild(this.el);
}
componentWillUnmount() {
modalRoot.removeChild(this.el);
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}
var c = 0
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {clicks: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// This will fire when the button in Child is clicked,
// updating Parent's state, even though button
// is not direct descendant in the DOM.
c ++
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}
render() {
return (
<div onClick={this.handleClick}>
<p>Number of clicks: {this.state.clicks}</p>
<p>
Open up the browser DevTools
to observe that the button
is not a child of the div
with the onClick handler.
</p>
<Modal>
<Child />
</Modal>
</div>
);
}
}
function Child() {
// The click event on this button will bubble up to parent,
// because there is no 'onClick' attribute defined
return (
<div className="modal">
<button type="button" id="ChildButton">Click</button>
</div>
);
}
ReactDOM.render(<Parent />, appRoot);
var ChildButton = document.getElementById("ChildButton")
ChildButton.click()
expect(c).toBe(1)
ChildButton.click()
expect(c).toBe(2)
*/
var a = document.querySelector("#a")
a.focus()
setTimeout(function(){
var i = document.createElement("input")
i.value ="333"
a.parentNode.appendChild(i)
// document.body.appendChild(i)
// var c = document.querySelector("#d")
// c.parentNode.removeChild(c)
},3000)
</script>
</body>
</html>