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 inputStyleallerede er erklæret med en vis standard styling.
Dit mål i denne udfordring er at opdatere, inputStyleså inputgrænsen er, 3px solid rednå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 iferklæring
At erklære charer fint, men se nærmere på iftilstanden:
if(this.state.input > char) { inputStyle = { border:'3px solid red' } } Husk, at det this.state.inputer 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.inputtil 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, 3i konsollen.
Yderligere, hvis du logger this.state.input > charpå 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å .lengthfor this.state.inputat 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...elsesætning på én linje og kan hjælpe med at forkorte din kode betydeligt.
Gå tilbage til din løsning og fjern alt undtagen charvariablen:
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 iferklæ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 iferklæring før:this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
Nu skal du håndtere den elsedel af den ternære operatør, som er alt imellem :og ;.
Mens du ikke brugte en elseerklæring i din første løsning, brugte du effektivt inputStylesom den er. Så brug bare inputStyleden 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.
