-
Notifications
You must be signed in to change notification settings - Fork 12
/
App.js
101 lines (90 loc) · 2.08 KB
/
App.js
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
import React, { Component } from 'react';
import './App.css';
const MyInput = (props) => {
return (<input
type="text"
ref={props.inputRef} />)
}
const FuncCustomComp = (props) => {
let textRef = null;
const handleClick = () => {
alert(`yey, input val is ${textRef.value}`)
}
return (
<div style={styles.myInput}>
<MyInput inputRef={(input) => { textRef = input; }}/>
<input
type="button"
value="show input"
onClick={handleClick}
/>
</div>
);
}
class App extends Component {
onKeyUp = (passed, e) => {
if (e.keyCode == 13) {
console.log(passed)
switch (passed) {
case 'firstName':
this.lastName.focus();
break;
case 'lastName':
this.age.focus();
break;
case 'age':
this.submit.focus();
break;
default:
this.submit.focus();
}
}
}
onSubmit = () => {
alert(`yey submited! ${this.firstName.value}, ${this.lastName.value} `);
}
render() {
return (
<div className="App">
<div>
<FuncCustomComp/>
</div>
<div>
<span>First Name: </span>
<input
type="text"
onKeyUp={this.onKeyUp.bind(this, 'firstName')}
ref={(input) => { this.firstName = input; }} />
</div>
<div>
<span>Last Name: </span>
<input
type="text"
onKeyUp={this.onKeyUp.bind(this, 'lastName')}
ref={(input) => { this.lastName = input; }} />
</div>
<div>
<span>Age: </span>
<input
type="text"
onKeyUp={this.onKeyUp.bind(this, 'age')}
ref={(input) => { this.age = input; }} />
</div>
<div>
<input
type="submit"
value="Submit"
onClick={this.onSubmit}
ref={(input) => { this.submit = input; }}
/>
</div>
</div>
);
}
}
const styles = {
myInput : {
'margin' : '20px'
}
}
export default App;