You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the previous sample we were setting an initial username value, what would
4
-
happen if we expect this value to come from e.g. an AJAX request or if it could
5
-
change in time? The current approach won't work.
3
+
In the previous sample we were setting an initial username value, what would happen if we expect this value to come from e.g. an AJAX request or if it could change in time? The current approach won't work.
6
4
7
5
We can think about two possible solutions:
8
6
9
-
- The first idea that could come into our mind is to implement a mix: we receive via props the current name value, then we hold an state with the current editing
10
-
value... what drawbacks could we encounter? We have to listen on the `componentWillReceiveProps` for any change on the parent user name control and replace our state, we end up with a mixed governance.
7
+
- The first idea that could come into our mind is to implement a mix: we receive via props the current name value, then we hold an state with the current editing value... what drawbacks could we encounter? We have to listen on the `componentWillReceiveProps` for any change on the parent user name control and replace our state, we end up with a mixed governance.
11
8
12
-
- The second idea is to setup two properties, the parent control will hold _userName_ and _editingUsername_, whenever the user clicks on the button to
13
-
replace the name it will notify the parent control and it will replace the
14
-
content of _userName_" with the content from _editingUsername_. If _userName_ gets updated by any other third party (e.g. ajax callback) it will update as well
15
-
_editingUsername_.
9
+
- The second idea is to setup two properties, the parent control will hold _`userName`_ and _`editingUsername`_, whenever the user clicks on the button to replace the name it will notify the parent control and it will replace the content of _`userName`_" with the content from _`editingUsername`_. If _`userName`_ gets updated by any other third party (e.g. ajax callback) it will update as well _`editingUsername`_.
16
10
17
-
We will take as a starting point sample _04 Callback_:
11
+
We will take as a starting point sample _[04 Callback](../04%20Callback/)_:
18
12
19
13
Summary steps:
20
14
21
-
- Update _nameEdit.jsx_ in order to request the new _editingUsername_, and remove it from the state.
15
+
- Update _[nameEdit.jsx](./src/nameEdit.jsx)_ in order to request the new _`editingUsername`_, and remove it from the state.
22
16
23
-
- Update _app.jsx_ to hold the new editing property in the state, pass it to the
24
-
children, control and perform the proper update on the callback event from the
25
-
child control.
17
+
- Update _[app.jsx](./src/app.jsx)_ to hold the new editing property in the state, pass it to the children, control and perform the proper update on the callback event from the child control.
26
18
27
19
## Prerequisites
28
20
@@ -32,45 +24,71 @@ Install [Node.js and npm](https://nodejs.org/en/) if they are not already instal
32
24
33
25
## Steps to build it
34
26
35
-
- Copy the content from _04 Callback_ and execute `npm install`.
27
+
- Copy the content from _[04 Callback](../04%20Callback/)_ and execute `npm install`.
36
28
37
-
- Update _nameEdit.jsx_ in order to request the new _editingUsername_, and remove it
38
-
from the state.
29
+
- Update _[nameEdit.jsx](./src/nameEdit.jsx)_ in order to request the new _`editingUsername`_, and remove it from the state.
39
30
40
-
```jsx
31
+
_[nameEdit.jsx](./src/nameEdit.jsx)_
32
+
```diff
41
33
import React from 'react';
34
+
import PropTypes from 'prop-types';
42
35
43
36
export class NameEditComponent extends React.Component {
- Update _app.jsx_ to hold the new editing property in the state, pass it to the
69
-
children control and perform the proper update on the callback event from the
70
-
child control.
71
-
88
+
- Update _[app.jsx](./src/app.jsx)_ to hold the new editing property in the state, pass it to the children control and perform the proper update on the callback event from the child control.
72
89
73
-
```jsx
90
+
_[app.jsx](./src/app.jsx)_
91
+
```diff
74
92
import React from 'react';
75
93
import {HelloComponent} from './hello';
76
94
import {NameEditComponent} from './nameEdit';
@@ -79,31 +97,44 @@ export class App extends React.Component {
Finally we can check the sample is working as _04 Callback_ executing from the command line
109
-
`npm start` and opening [http://localhost:8080](http://localhost:8080).
140
+
Finally we can check the sample is working as _[04 Callback](../04%20Callback/)_ executing from the command line `npm start` and opening [http://localhost:8080](http://localhost:8080).
En la muestra anterior, establecimos un valor de nombre de usuario inicial, ¿qué pasaría si esperamos que este valor provenga de, por ejemplo, una solicitud AJAX o si podría cambiar a tiempo? El enfoque actual no funcionará.
4
+
5
+
Podemos pensar en dos posibles soluciones:
6
+
7
+
- La primera idea que nos viene a la mente es implementar una combinación: recibimos a través de _props_ el valor del nombre actual, luego tenemos un _state_ con el valor de edición actual ... ¿qué inconvenientes podríamos encontrar? Tenemos que escuchar en el `componentWillReceiveProps` para cualquier cambio en el control de nombre de usuario principal y reemplazar nuestro estado, terminamos con un gobierno mixto.
8
+
9
+
- La segunda idea es configurar dos propiedades, el control principal contendrá _`userName`_ y _`editingUsername`_, cada vez que el usuario haga clic en el botón para reemplazar el nombre notificará al control principal y se reemplazará el contenido de _`userName`_ con el contenido de _`editingUsername`_. Si _`userName`_ es actualizado por cualquier otro tercero (por ejemplo, ajax callback) también actualizará _`editingUsername`_.
10
+
11
+
Tomaremos como punto de partida muestra _[04 Callback](../04%20Callback/)_:
12
+
13
+
Pasos resumidos:
14
+
15
+
- Actualice _[nameEdit.jsx](./src/nameEdit.jsx)_ para solicitar el nuevo _`editingUsername`_, y elimínelo del _state_.
16
+
17
+
- Actualizar _[app.jsx](./src/app.jsx)_ para mantener la nueva propiedad de edición en el estado, pasarla a los elementos secundarios, controlar y realizar la actualización adecuada en el evento de devolución de llamada desde el control secundario.
18
+
19
+
## Requisitos previos
20
+
21
+
Instale [Node.js and npm](https://nodejs.org/en/) si aún no están instalados en su computadora.
22
+
23
+
> Verifique que esté ejecutando al menos los nodos v6.x.x y npm 3.x.x ejecutando `node -v` y` npm -v` en una ventana de terminal / consola. Las versiones anteriores pueden producir errores.
24
+
25
+
## Pasos para construirlo
26
+
27
+
- Copie el contenido de _[04 Callback](../04%20Callback/)_ y ejecute `npm install`.
28
+
29
+
- Actualice _[nameEdit.jsx](./src/nameEdit.jsx)_ para solicitar el nuevo _`editingUsername`_, y elimínelo del estado.
30
+
31
+
_[nameEdit.jsx](./src/nameEdit.jsx)_
32
+
```diff
33
+
import React from 'react';
34
+
import PropTypes from 'prop-types';
35
+
36
+
export class NameEditComponent extends React.Component {
- Actualizar _[app.jsx](./src/app.jsx)_ para mantener la nueva propiedad de edición en el estado, pasarla al control secundario y realizar la actualización adecuada en el evento de devolución de llamada desde el control secundario.
Finalmente podemos verificar que la muestra está funcionando como _[04 Devolución de llamada](../04%20Callback/)_ ejecutándose desde la línea de comando `npm start` y abriendo [http://localhost:8080](http://localhost:8080).
0 commit comments