freeCodeCamp/guide/spanish/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md at 4bb1a6452c19332bbd0345033196457dc933db21

mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-07 00:00:53 -05:00

Files

Randell Dawson 0a1eeea424 fix(guide) Replace invalid prism code block names (#35961 )

* fix: replace sh with shell

fix replace terminal with shell

fix replace node with js

fix replace output with shell

fix replace cs with csharp

fix replace c++ with cpp

fix replace c# with csharp

fix replace javasctipt with js

fix replace syntax  with js

fix replace unix with shell

fix replace linux with shell

fix replace java 8 with java

fix replace swift4 with swift

fix replace react.js with jsx

fix replace javascriot with js

fix replace javacsript with js

fix replace c++ -  with cpp

fix: corrected various typos

fix: replace Algorithm with nothing

fix: replace xaml with xml

fix: replace solidity with nothing

fix: replace c++ with cpp

fix: replace txt with shell

fix: replace code with json and css

fix: replace console with shell

2019-05-15 19:08:19 +02:00

1.8 KiB

Raw Blame History

title, localeTitle

title	localeTitle
Change Inline CSS Conditionally Based on Component State	Cambiar CSS en línea condicionalmente basado en el estado del componente

Cambiar CSS en línea condicionalmente basado en el estado del componente

Sugerencia 1:

Vas a verificar la longitud de this.state.input así que usa su propiedad .length .

this.state.input.length

Sugerencia 2:

Usted está ingresando el código antes de la declaración de retorno, por lo que puede usar un código JavaScript puro if/then .

Solución:

Utilizará una instrucción if/then para verificar el valor de this.state.input.length . Si es más largo que 15, asigne '3px solid red' a inputStyle.border .

class GateKeeper extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      input: '' 
    }; 
    this.handleChange = this.handleChange.bind(this); 
  } 
  handleChange(event) { 
    this.setState({ input: event.target.value }) 
  } 
  render() { 
    let inputStyle = { 
      border: '1px solid black' 
    }; 
    // change code below this line 
    if (this.state.input.length > 15) { 
      inputStyle.border = '3px solid red'; 
    } 
    // change code above this line 
    return ( 
      <div> 
        <h3>Don't Type Too Much:</h3> 
        <input 
          type="text" 
          style={inputStyle} 
          value={this.state.input} 
          onChange={this.handleChange} /> 
      </div> 
    ); 
  } 
 };

Solución

Escriba una declaración condicional que se evalúe de acuerdo con su estado, como se menciona en la descripción del desafío, verifique la longitud de la entrada y asigne un nuevo objeto a la variable inputStyle.

if (this.state.input.length > 15) { 
  inputStyle = { 
    border: '3px solid red' 
  } 
 }

1.8 KiB Raw Blame History