freeCodeCamp/guide/chinese/certifications/front-end-libraries/react/change-inline-css-conditionally-based-on-component-state/index.md

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' 
  } 
 }