diff --git a/curriculum/challenges/spanish/03-front-end-libraries/react/bind-this-to-a-class-method.spanish.md b/curriculum/challenges/spanish/03-front-end-libraries/react/bind-this-to-a-class-method.spanish.md index 378f7c0a9a2..7d3f3494b39 100644 --- a/curriculum/challenges/spanish/03-front-end-libraries/react/bind-this-to-a-class-method.spanish.md +++ b/curriculum/challenges/spanish/03-front-end-libraries/react/bind-this-to-a-class-method.spanish.md @@ -4,14 +4,14 @@ title: Bind 'this' to a Class Method challengeType: 6 isRequired: false videoUrl: '' -localeTitle: Enlazar 'esto' a un método de clase +localeTitle: Enlazar 'this' a un método de la clase --- ## Description -
Además de establecer y actualizar el state , también puede definir métodos para su clase de componente. Un método de clase normalmente necesita usar this palabra clave para poder acceder a las propiedades de la clase (como el state y los props ) dentro del alcance del método. Hay algunas maneras de permitir que sus métodos de clase accedan a this . Una forma común es vincular de forma explícita this en el constructor por lo que this se une a los métodos de la clase cuando el componente se inicializa. Es posible que haya notado que el último desafío utilizó this.handleClick = this.handleClick.bind(this) para su método handleClick en el constructor. Luego, cuando llama a una función como this.setState() dentro de su método de clase, this refiere a la clase y no quedará undefined . Nota: this palabra clave es uno de los aspectos más confusos de JavaScript, pero desempeña un papel importante en React. A pesar de que su comportamiento aquí es totalmente normal, estas lecciones no son el lugar para una revisión en profundidad de this así que por favor consulte otras lecciones si lo anterior es confuso.
+
Además de establecer y actualizar state , también puede definir métodos para la clase de su componente. Un método de clase normalmente necesita usar la palabra clave this para poder acceder a las propiedades de la clase (como el state y los props ) desde dentro del método. Hay algunas maneras de permitir que sus métodos accedan a this. Una forma común es vincular de forma explícita this en el constructor por lo que this se une a los métodos de la clase cuando el componente se crea. Es posible que haya notado que el último desafío utilizó this.handleClick = this.handleClick.bind(this) para su método handleClick en el constructor. Luego, cuando llama a una función como this.setState() dentro de su método, this refiere a la clase y no quedará undefined. Nota: La palabra clave this es uno de los aspectos más confusos de JavaScript, pero desempeña un papel importante en React. A pesar de que su comportamiento aquí es totalmente normal, estas lecciones no hablan en profundidad sobre la palabra clave this así que por favor consulte otras lecciones si lo anterior es confuso.
## Instructions -
El editor de código tiene un componente con un state que realiza un seguimiento de un recuento de elementos. También tiene un método que le permite incrementar este recuento de elementos. Sin embargo, el método no funciona porque está usando this palabra clave que no está definida. Corregir el problema mediante la unión explícitamente this a la addItem() método en el constructor del componente. A continuación, agregue un controlador de clic al elemento de button en el método de procesamiento. Debería activar el método addItem() cuando el botón recibe un evento de clic. Recuerde que el método que pase al controlador onClick necesita llaves porque debe interpretarse directamente como JavaScript. Una vez que complete los pasos anteriores, debería poder hacer clic en el botón y ver el incremento en el recuento de elementos en el HTML.
+
El editor de código tiene un componente con un state que lleva la cuenta de los elementos. También tiene un método que le permite incrementar este recuento de elementos. Sin embargo, el método no funciona porque está usando la palabra clave this que no está definida en el metodo. Corrija el problema uniendo explícitamente this al metodo addItem() en el constructor del componente. A continuación, añada un controlador de clic al elemento button en el método render. Debería activar el método addItem() cuando el botón recibe un evento de clic. Recuerde que el método que pase al controlador onClick necesita llaves porque debe interpretarse directamente como JavaScript. Una vez que complete los pasos anteriores, debería poder hacer clic en el botón y ver el incremento en el recuento de elementos en el HTML.
## Tests
@@ -19,11 +19,11 @@ localeTitle: Enlazar 'esto' a un método de clase ```yml tests: - text: 'MyComponent debe devolver un elemento div que envuelve dos elementos, un botón y un elemento h1 , en ese orden.' - testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("div").length === 1 && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(0).type() === "button" && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(1).type() === "h1", "MyComponent should return a div element which wraps two elements, a button and an h1 element, in that order.");' + testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).find("div").length === 1 && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(0).type() === "button" && Enzyme.mount(React.createElement(MyComponent)).find("div").childAt(1).type() === "h1", "MyComponent debe devolver un elemento div que envuelve dos elementos, un botón y un elemento h1 , en ese orden.");' - text: 'El estado de MyComponent debe inicializarse con el par de valores clave { itemCount: 0 } .' - testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "The state of MyComponent should initialize with the key value pair { itemCount: 0 }.");' - - text: Al hacer clic en el elemento del button se debe ejecutar el método addItem e incrementar el estado itemCount en 1 . - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state("itemCount")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("itemCount")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Clicking the button element should run the addItem method and increment the state itemCount by 1."); };' + testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("itemCount") === 0, "El estado de MyComponent debe inicializarse con el par de valores clave { itemCount: 0 } .");' + - text: 'Al hacer clic en el elemento button se debe ejecutar el método addItem e incrementar el estado itemCount en 1.' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state("itemCount")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("itemCount")); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, "Al hacer clic en el elemento del button se debe ejecutar el método addItem e incrementar el estado itemCount en 1 ."); };' ``` @@ -71,7 +71,7 @@ class MyComponent extends React.Component {
```js -console.info('after the test'); +ReactDOM.render(, document.getElementById('root')) ```
@@ -82,6 +82,27 @@ console.info('after the test');
```js -// solution required +class MyComponent extends React.Component { + constructor(props) { + super(props); + this.state = { + itemCount: 0 + }; + this.addItem = this.addItem.bind(this); + } + addItem() { + this.setState({ + itemCount: this.state.itemCount + 1 + }); + } + render() { + return ( +
+ +

Current Item Count: {this.state.itemCount}

+
+ ); + } +}; ``` -
+
\ No newline at end of file