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. 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. 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.");'
- 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
."); };'
```