-
Notifications
You must be signed in to change notification settings - Fork 0
/
componente-classe.html
129 lines (106 loc) · 5.1 KB
/
componente-classe.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
<!DOCTYPE html>
<html lang="en" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:xd_Signature msdt:dt="string"></mso:xd_Signature>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">FAUSTO GONCALVES CINTRA</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<mso:Order msdt:dt="string">400.000000000000</mso:Order>
<mso:ComplianceAssetId msdt:dt="string"></mso:ComplianceAssetId>
<mso:TemplateUrl msdt:dt="string"></mso:TemplateUrl>
<mso:ReferenceId msdt:dt="string"></mso:ReferenceId>
<mso:xd_ProgID msdt:dt="string"></mso:xd_ProgID>
<mso:_ExtendedDescription msdt:dt="string"></mso:_ExtendedDescription>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">FAUSTO GONCALVES CINTRA</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<mso:ContentTypeId msdt:dt="string">0x010100D6913FBF8C1A7A46A7F8AD33C58435C5</mso:ContentTypeId>
<mso:TriggerFlowInfo msdt:dt="string"></mso:TriggerFlowInfo>
<mso:_SourceUrl msdt:dt="string"></mso:_SourceUrl>
<mso:_SharedFileIndex msdt:dt="string"></mso:_SharedFileIndex>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//EXERCICIO CONVERSÃO EM COMPONENTE DE CLASSE:
/*
const FormSoma = () => {
const [num1, setNum1] = React.useState(0)
const [num2, setNum2] = React.useState(0)
const [soma, setSoma] = React.useState(0)
React.useEffect(() => {
setSoma(isNaN(num1) || isNaN(num2) ? '' : num1 + num2)
}, [num1, num2])
const handleChange1 = event => setNum1(Number(event.target.value))
const handleChange2 = event => setNum2(Number(event.target.value))
return (
<form>
<div>
<label htmlFor="num1">Primeiro número:</label><br />
<input id="num1" type="number" value={num1} onChange={handleChange1} />
</div>
<div>
<label htmlFor="num2">Segundo número:</label><br />
<input id="num2" type="number" value={num2} onChange={handleChange2} />
</div>
<div>Soma: {soma}</div>
</form>
)
}
ReactDOM.render(<FormSoma />, document.getElementById('root'))
*/
class FormSoma extends React.Component //Componente de CLASSE definido
{
constructor(props) //contrutor da classe, passando e armazenando props
{
super(props)
//state vai receber os dois numeros para soma, iniciamos como 0
this.state =
{
num1: 0, num2: 0
}
// .bind para passar os dados como um <argumento> no handleChange
this.handleChange = this.handleChange.bind(this);
}
render() //renderizar para exibir na página ao usuario
{
return (
<form>
<div>
<label htmlFor="num1">Primeiro número: </label><br />
<input id="num1" type="number" value={this.state.num1} onChange={this.handleChange}
/*a cada interação vai chamar handleChange*/ />
</div>
<div>
<label htmlFor="num2">Segundo número: </label><br />
<input id="num2" type="number" value={this.state.num2} onChange={this.handleChange}
/*a cada interação vai chamar handleChange*/ />
</div>
<div id="soma"> Soma:{ this.state.num1+this.state.num2
/*soma do primeiro e segundo numero, que foi pego no constructor */}
</div>
</form>
)
}
handleChange(event){ //definindo o handleChange, que vai atualizar os valores de State
if(event.target.id == 'num2') //se clicar no numero2, dispara o setState para alterar, lembrando de nunca alterar state direto, sempre setState para atualizar
{
this.setState({num2: Number(event.target.value)});
}
else if(event.target.id == 'num1') //evento numero 1 foi disparado
{
this.setState({num1: Number(event.target.value)});
}
}
}
ReactDOM.render(<FormSoma />, document.getElementById('root')) // Mostragem do FormSoma em 'root'
</script>
</body>
</html>