freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036176	Use State to Toggle an Element	6	false		Usar estado para alternar un elemento

Description

Puede usar el 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

4.3 KiB Raw Blame History