4.3 KiB
4.3 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24c314108439a4d4036176 | Use State to Toggle an Element | 6 | false | Usar estado para alternar un elemento |
Description
state
en las aplicaciones React de formas más complejas que las que ha visto hasta ahora. Un ejemplo es monitorear el estado de un valor, luego renderizar la IU condicionalmente en base a este valor. Hay varias maneras diferentes de lograr esto, y el editor de código muestra un método. Instructions
MyComponent
tiene una propiedad de visibility
que se inicializa en false
. El método de renderización devuelve una vista si el valor de visibility
es verdadero y una vista diferente si es falsa. Actualmente, no hay forma de actualizar la propiedad de visibility
en el state
del componente. El valor debe alternar entre verdadero y falso. Hay un controlador de clic en el botón que activa un método de clase llamado toggleVisibility()
. Defina este método para que el state
de visibility
cambie al valor opuesto cuando se llama al método. Si la visibility
es false
, el método lo establece en true
y viceversa. Finalmente, haga clic en el botón para ver la representación condicional del componente en función de su state
. Sugerencia: ¡No olvide enlazar this
palabra clave con el método en el constructor! Tests
tests:
- text: <code>MyComponent</code> debería devolver un elemento <code>div</code> que contenga un <code>button</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find("div").find("button").length, 1, "<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.");'
- text: El estado de <code>MyComponent</code> debe inicializarse con una propiedad de <code>visibility</code> establecida en <code>false</code> .
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state("visibility"), false, "The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.");'
- text: Al hacer clic en el elemento del botón se debe cambiar la propiedad de <code>visibility</code> en estado entre <code>true</code> y <code>false</code> .
testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state("visibility")); }; const second = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("visibility")); }; const third = () => { mockedComponent.find("button").simulate("click"); return waitForIt(() => mockedComponent.state("visibility")); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue, "Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>."); }; '
Challenge Seed
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
visibility: false
};
// change code below this line
// change code above this line
}
// change code below this line
// change code above this line
render() {
if (this.state.visibility) {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h1>Now you see me!</h1>
</div>
);
} else {
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
</div>
);
}
}
};
After Test
console.info('after the test');
Solution
// solution required