0a1eeea424
* 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
1.6 KiB
1.6 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， inputStyle.border '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'
}
}