react写内联css
If you're having trouble with freeCodeCamp's Change Inline CSS Conditionally Based on Component State challenge, you're probably not alone.
如果您在处理freeCodeCamp的“基于组件状态有条件地更改内联CSS”挑战时遇到麻烦,您可能并不孤单。
In this challenge, you need to add code to change some inline CSS conditionally based on the state of a React component.
在这个挑战中,您需要添加代码以根据React组件的状态有条件地更改某些内联CSS。
When you first go to the challenge, here's the code you'll see:
首次参加挑战时,您将看到以下代码:
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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
Notice that an inline style object, inputStyle
, has already been declared with some default styling.
请注意,已经使用某种默认样式声明了一个内联样式对象inputStyle
。
Your goal in this challenge is to update inputStyle
so the border of the input is 3px solid red
when there are more than 15 characters in the input. Note that the text in the input box is saved in the component's state as input
:
您在此挑战中的目标是更新inputStyle
以便在输入中包含15个以上字符时,输入边框为3px solid red
。 请注意,在输入框中的文本保存在组件的状态, input
:
...
this.state = {
input: ''
};
...
接近,但不完全 (Close, but not quite)
Imagine that, after reading the description and instructions, you come up with this:
想象一下,在阅读了说明和说明之后,您会得出以下结论:
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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
But when you try to submit this, it doesn't pass all the tests. Let's take a closer look at what's going on.
但是,当您尝试提交此文件时,它并不能通过所有测试。 让我们仔细看看发生了什么。
解决方案 (Solutions)
使用if
语句 (Using an if
statement)
Declaring char
is fine, but take a closer look at the if
condition:
声明char
很好,但是请仔细查看if
条件:
if(this.state.input > char) {
inputStyle = {
border:'3px solid red'
}
}
Remember that this.state.input
is the value of the input box and is a string. For example, it could be "testing testing 1, 2, 3".
请记住, this.state.input
是输入框的值,并且是一个字符串。 例如,它可以是“ testing testing 1,2,3”。
If you enter "testing testing 1, 2, 3" into the text box and lot this.state.input
to the console:
如果在文本框中输入“ testing testing 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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
You'll see testing testing 1, 2, 3
in the console.
您会在控制台中看到testing testing 1, 2, 3
。
Further, if you log this.state.input > char
to the console, you'll see that it evaluates to false
:
此外,如果将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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
Simply put, you can't compare a string (this.state.input
) directly to char
, which is a number.
简而言之,您不能将字符串( this.state.input
)直接与char
进行比较, char
是一个数字。
Instead, call the .length
on this.state.input
to get the length of the string and compare that to count
:
相反,请在this.state.input
上调用.length
以获取字符串的长度并将其进行比较以进行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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
Since the length of the string "testing testing 1, 2, 3" is 23 characters long (including spaces and commas), the border of the input box will turn red:
由于字符串“ testing testing 1,2,3”的长度为23个字符(包括空格和逗号),因此输入框的边框将变为红色:
使用三元运算符 (Using a ternary operator)
A ternary or conditional operator is like a one line if...else
statement, and can help shorten your code significantly.
if...else
语句, if...else
三元运算符或条件运算符就像一行if...else
,可以大大缩短代码长度。
Go back to your solution and remove everything except the char
variable:
返回您的解决方案,并删除除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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
Now take the condition you used in your earlier if
statement and use it as the first part of the ternary condition: this.state.input.length > char ? : ;
现在,采用您在先前的if
语句中使用的条件,并将其用作三元条件的第一部分: this.state.input.length > char ? : ;
this.state.input.length > char ? : ;
Everything between ?
and :
indicates what happens if the earlier statement is true. You can just copy the code that was inside your if
statement before: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
一切之间?
和:
如果先前的语句为true,将会发生什么。 您可以只复制if
语句之前的代码: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
this.state.input.length > char ? inputStyle = { border:'3px solid red' } : ;
Now you need to handle the else
portion of the ternary operator, which is everything between :
and ;
.
现在,您需要处理三元运算符的else
部分,它是:
和;
之间的所有内容;
。
While you didn't use an else
statement in your first solution, you effectively used inputStyle
as-is. So just use inputStyle
the way it's declared earlier in your code: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
尽管您在第一个解决方案中未使用else
语句,但实际上inputStyle
原样使用inputStyle
。 因此,只需inputStyle
前面在代码中声明的方式使用inputStyle
: this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
this.state.input.length > char ? inputStyle = { border:'3px solid red' } : inputStyle;
Your whole solution should look like this:
您的整个解决方案应如下所示:
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 (
<div>
<h3>Don't Type Too Much:</h3>
<input
type="text"
style={inputStyle}
value={this.state.input}
onChange={this.handleChange} />
</div>
);
}
};
And that's it – you should be able to pass the challenge! Now go forth and conditionally style React components to your heart's content.
就是这样–您应该能够克服挑战! 现在,根据您的内心条件有条件地对React组件进行样式设置。
翻译自: https://www.freecodecamp.org/news/react-change-inline-css-conditionally-based-on-component-state/
react写内联css