React - Промяна на вградения CSS условно въз основа на състоянието на компонента

Ако имате проблеми с промяната на вградения CSS на freeCodeCamp условно въз основа на предизвикателството за състояние на компонента, вероятно не сте сами.

В това предизвикателство трябва да добавите код, за да промените някои вградени CSS условно въз основа на състоянието на React компонент.

Когато отидете за първи път на предизвикателството, ето кода, който ще видите:

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:

); } };

Забележете, че вграден обект на стил inputStyle,, вече е деклариран с някакъв стил по подразбиране.

Вашата цел в това предизвикателство е да актуализирате, inputStyleтака че границата на входа е, 3px solid redкогато във входа има повече от 15 знака. Имайте предвид, че текстът в полето за въвеждане се записва в състоянието на компонента като input:

... this.state = { input: '' }; ...

Близо, но не съвсем

Представете си, че след като прочетете описанието и инструкциите, измислите следното:

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:

); } };

Но когато се опитате да изпратите това, то не преминава всички тестове. Нека разгледаме по-отблизо какво се случва.

Решения

Използване на ifизявление

Декларирането charе добре, но разгледайте по-отблизо ifсъстоянието:

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

Не забравяйте, че това this.state.inputе стойността на полето за въвеждане и е низ. Например, това може да бъде "тестване на тестове 1, 2, 3".

Ако въведете "тестване тестване 1, 2, 3" в текстовото поле и партида this.state.inputкъм конзолата:

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:

); } };

Ще видите testing testing 1, 2, 3в конзолата.

Освен това, ако влезете this.state.input > charв конзолата, ще видите, че тя оценява на 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:

); } };

Просто казано, не можете this.state.inputдиректно да сравните низ ( ) char, който е число.

Вместо това се обадете на, .lengthза this.state.inputда получите дължината на низа и го сравнете с 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:

); } };

Тъй като дължината на низа "тестване на тестове 1, 2, 3" е дълга 23 символа (включително интервали и запетаи), границата на полето за въвеждане ще стане червена:

Използване на троичен оператор

Тройният или условният оператор е като едноредов if...elseоператор и може да ви помогне да съкратите значително кода си.

Върнете се към решението си и премахнете всичко с изключение на charпроменливата:

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:

); } };

Сега вземете условието, което сте използвали в по-ранното си ifизявление, и го използвайте като първата част от тройното състояние:this.state.input.length > char ?  :  ;

Всичко между ?и :показва какво се случва, ако по-ранното твърдение е вярно. Можете просто да копирате кода, който е бил вътре в ifизвлечението ви преди:this.state.input.length > char ? inputStyle = { border:'3px solid red' } :  ;

Сега трябва да се справите с elseчастта на троичния оператор, която е всичко между :и ;.

Въпреки че не сте използвали elseизявление в първото си решение, вие ефективно използвате такова , inputStyleкаквото е. Така че просто използвайте inputStyleначина, по който е деклариран по-рано във вашия код:this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;

Цялото ви решение трябва да изглежда така:

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:

); } };

И това е всичко - трябва да можете да преминете предизвикателството! Сега продължете напред и условно оформете компонентите на React по ваше желание.