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 до душі.