Reager - Skift indbygget CSS betinget baseret på komponenttilstand
Hvis du har problemer med freeCodeCamp's Change Inline CSS betinget baseret på udfordring fra komponenttilstand, er du sandsynligvis ikke alene.
I denne udfordring skal du tilføje kode for at ændre nogle inline CSS betinget baseret på tilstanden for en React-komponent.
Når du først går til udfordringen, er her den kode, du ser:
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 // change code above this line return ( Don't Type Too Much:
); } };
Bemærk, at et indbygget stilobjekt inputStyle
allerede er erklæret med en vis standard styling.
Dit mål i denne udfordring er at opdatere, inputStyle
så inputgrænsen er, 3px solid red
når der er mere end 15 tegn i inputet. Bemærk, at teksten i inputboksen er gemt i komponentens tilstand som input
:
... this.state = { input: '' }; ...
Luk, men ikke helt
Forestil dig, at du, efter at have læst beskrivelsen og instruktionerne, finder på dette:
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 const char = 15; if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( Don't Type Too Much:
); } };
Men når du prøver at indsende dette, består det ikke alle testene. Lad os se nærmere på, hvad der foregår.
Løsninger
Brug af en if
erklæring
At erklære char
er fint, men se nærmere på if
tilstanden:
if(this.state.input > char) { inputStyle = { border:'3px solid red' } }
Husk, at det this.state.input
er værdien i inputboksen og er en streng. For eksempel kan det være "testning af test 1, 2, 3".
Hvis du indtaster "testning af test 1, 2, 3" i tekstboksen og meget this.state.input
til konsollen:
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 const char = 15; console.log(this.state.input); if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( Don't Type Too Much:
); } };
Du kan se testing testing 1, 2, 3
i konsollen.
Yderligere, hvis du logger this.state.input > char
på konsollen, vil du se, at den evalueres til false
:
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 const char = 15; console.log(this.state.input > char); if(this.state.input > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( Don't Type Too Much:
); } };
Kort sagt, du kan ikke sammenligne en streng ( this.state.input
) direkte med char
, hvilket er et tal.
I stedet kalder du på .length
for this.state.input
at få længden af strengen og sammenligne den med count
:
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 const char = 15; if(this.state.input.length > char) { inputStyle = { border:'3px solid red' } } // change code above this line return ( Don't Type Too Much:
); } };
Da længden af strengen "testning af test 1, 2, 3" er 23 tegn lang (inklusive mellemrum og kommaer), bliver grænsen til inputboksen rød:

Brug af en ternær operatør
En ternær eller betinget operatør er som en if...else
sætning på én linje og kan hjælpe med at forkorte din kode betydeligt.
Gå tilbage til din løsning og fjern alt undtagen char
variablen:
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 // change code above this line return ( Don't Type Too Much:
); } };
Tag nu den tilstand, du brugte i din tidligere if
erklæring, og brug den som den første del af den ternære tilstand:this.state.input.length > char ? : ;
Alt imellem ?
og :
angiver, hvad der sker, hvis den tidligere erklæring er sand. Du kan bare kopiere koden, der var inde i din if
erklæring før:this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
Nu skal du håndtere den else
del af den ternære operatør, som er alt imellem :
og ;
.
Mens du ikke brugte en else
erklæring i din første løsning, brugte du effektivt inputStyle
som den er. Så brug bare inputStyle
den måde, det er erklæret tidligere i din kode:this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
Hele din løsning skal se sådan ud:
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 const char = 15; this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle; // change code above this line return ( Don't Type Too Much:
); } };
Og det er det - du skal kunne klare udfordringen! Gå nu ud og stil betinget af Reager komponenter efter dit hjertes indhold.