Ha problémái vannak a freeCodeCamp's Inline CSS módosítása feltételesen az alkatrészállapot-kihívás alapján, valószínűleg nem vagy egyedül.
Ebben a kihívásban hozzá kell adnia egy kódot néhány belső CSS megváltoztatásához, feltételesen a React összetevő állapota alapján.
Amikor először megy a kihívásra, itt találja a kódot:
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:
); } }; Figyelje meg, hogy egy inline stílusú objektum,, inputStylemár deklarálva van valamilyen alapértelmezett stílusban.
A kihívás célja az, hogy frissítsen, inputStyleígy a bemenet határa 3px solid redakkor van, ha 15-nél több karakter van a bemenetben. Vegye figyelembe, hogy a beviteli mező szövege az összetevő állapotában a inputkövetkezőképpen mentésre kerül :
... this.state = { input: '' }; ...Közel, de nem egészen
Képzelje el, hogy a leírás és az utasítások elolvasása után ezt találja ki:
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:
); } };De amikor megpróbálja ezt beküldeni, az nem felel meg az összes teszten. Nézzük meg közelebbről, mi történik.
Megoldások
Egy ifállítás használata
A nyilatkozat charrendben van, de nézze meg közelebbről az ifállapotot:
if(this.state.input > char) { inputStyle = { border:'3px solid red' } } Ne feledje, hogy this.state.inputez a beviteli mező értéke és egy karakterlánc. Például ez lehet az "1., 2., 3. teszt tesztelése".
Ha beírja a "tesztelés 1, 2, 3 tesztelést" a szövegmezőbe és a tétel tételeket this.state.inputa konzolra:
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:
); } };Meglátja testing testing 1, 2, 3a konzolon.
Továbbá, ha bejelentkezik this.state.input > chara konzolra, látni fogja, hogy a következőképpen értékel 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:
); } };Egyszerűen fogalmazva, nem lehet összehasonlítani a karakterláncot ( this.state.input) közvetlenül chara számmal.
Ehelyett hívja a .lengthfel this.state.input, hogy a string hossza és összehasonlítani, hogy 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:
); } };Mivel az "1, 2, 3 tesztelés tesztelése" karakterlánc hossza 23 karakter (szóközökkel és vesszőkkel együtt), a beviteli mező szegélye pirosra változik:
Hármas operátor használata
A három- vagy feltételes operátor olyan, mint egy soros if...elseutasítás, és jelentősen lerövidítheti a kódot.
Térjen vissza a megoldáshoz, és távolítson el mindent, a charváltozó kivételével :
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:
); } }; Most vegye fel a korábbi ifutasításában használt feltételt, és használja a háromszintű feltétel első részeként:this.state.input.length > char ? : ;
Minden, ?és :jelzi, mi történik, ha a korábbi állítás igaz. Csak átmásolhatja azt a kódot, amely korábban a ifnyilatkozatában volt:this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
Most kezelnie kell elsea háromszintű operátor azon részét, amely minden a :és között van ;.
Míg elseaz első megoldásnál nem használtál állítást, addig a tényleges módszert használta inputStyle. Tehát csak inputStylea kódban korábban deklarált módon használja :this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
Az egész megoldásnak így kell kinéznie:
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:
); } }; És ennyi - képesnek kell lennie a kihívásra! Most menj előre, és feltételesen stílusold meg a React komponenseket a szíved tetszése szerint.