react写内联css_React-根据组件状态有条件地更改内联CSS

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