reactjs/Ejercicio4.html at master · oscaruhp/reactjs · GitHub

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
<!DOCTYPE html>
<html>

  <head>

    <script src="http://fb.me/react-with-addons-0.12.0.js"></script>

    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
 <link rel="stylesheet" href="bootstrap.min.css">
  </head>

  <body>

    <div class="container">
        <div id="formulario"></div>
    </div>

    <script type="text/jsx">
    var ComponenteFormulario = React.createClass({
        getInitialState:function (){
            return {
            placeHolderNombre:this.props.placeHolderNombre,
            txtEtiqueta:this.props.txtEtiqueta,
            txtSaludo: this.props.txtSaludo
          };
        },
        Actualizar: function(event) {
          var valorNombre=this.refs.refNombre.getDOMNode().value;
          this.setState({txtSaludo:"Hola "+valorNombre});
        }
        ,
        render : function() {
        return React.DOM.div({
                className:'form-group',
                children:[
                          React.DOM.label({
                            htmlFor:'exampleInputEmail1',
                            children:this.state.txtEtiqueta,
                          }),
                          React.DOM.input({
                            type:"text",
                            className:"form-control",
                            name:"txtNombre",
                            placeholder:this.state.placeHolderNombre,
                            ref:"refNombre",
                            onChange:this.Actualizar
                          }),
                      (<div ref="SalidaSaludo">{this.state.txtSaludo}</div>)

                   ]
        });

      }
    });

  React.render(<ComponenteFormulario placeHolderNombre="nombre" txtEtiqueta="Escribe t&uacute; nombre completo:" txtSaludo="Hola:"/>,document.getElementById('formulario'));

  </script>
  </body>
</html>