* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
2.2 KiB
2.2 KiB
title, localeTitle
title | localeTitle |
---|---|
Change Inline CSS Conditionally Based on Component State | Изменение встроенного CSS, условно основанного на состоянии компонента |
Изменение встроенного CSS, условно основанного на состоянии компонента
Подсказка 1:
Вы будете проверять длину this.state.input
поэтому используйте свойство .length
.
this.state.input.length
Подсказка 2:
Вы вводите код перед оператором return, чтобы вы могли использовать инструкцию JavaScript if/then
.
Решение:
Вы будете использовать инструкцию if/then
чтобы проверить значение this.state.input.length
. Если он длиннее 15, назначьте '3px solid red'
для inputStyle.border
.
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
if (this.state.input.length > 15) {
inputStyle.border = '3px solid red';
}
// change code above this line
return (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
Решение
Напишите условный оператор, который оценивается в соответствии с вашим состоянием, как указано в описании задачи, проверяет длину ввода и назначает новый объект переменной inputStyle.
if (this.state.input.length > 15) {
inputStyle = {
border: '3px solid red'
}
}