无法动态设置类名

Question

您好我有输入元素，我通过调用函数动态设置类名称，如下所示：

<div className={styles1.col75}>
           <input className={this.errorClass(this.state.errors["name"])} type="text" id="name" name="name" onChange={this.updateParam} value={this.state.name} placeholder="Your full name.."/>
           <span style={{color: "red"}}>{this.state.errors["name"]}</span>
         </div>

你可以检查上面的代码className = {this.errorClass（this.state.errors [＆＃34; name＆＃34;]）}

errorClass函数定义如下：

errorClass(error) {
    if(error && error.length > 0){
      return 'error';
    }else{
      return '';
    }
  }

我在main.css中定义了错误类，如下所示：

.error{
     border: 2px solid red;
   }

我已按如下方式导入main.css：

import styles1 from '../css/main.css';

我能够看到使用浏览器检查元素功能设置了正确的类

<input type="text" class="error" id="name" name="name" value="" placeholder="Your full name..">

但是我没有在浏览器中看到错误的类定义，因为没有对输入元素应用所需的效果。

有人可以指导吗？

Answer 1

以下示例演示工作正常。在上面的演示中，当您清除文本字段值时，将动态应用错误类。

我正在添加下面的代码段

＆＃13;

＆＃13;

import React, { Component } from 'react';
import './App.css'

class App extends Component {
  constructor(){
    super()
    this.state = {
      errors : {"name" : ""},
      name : "Initial Value"
    }
    this.updateParam = this.updateParam.bind(this);
  }

  updateParam(event){
    this.setState({name : event.target.value});
    if(event.target.value === ""){
      this.setState({errors : {"name" : "Error Occured"}});
    }
  }

  errorClass(error) {
    if(error && error.length > 0){
      return 'error';
    }else{
      return '';
    }
  }
  
  render() {
    return (
        <div> Hello World
          <div className="sample">
           <input className={this.errorClass(this.state.errors["name"])} type="text" id="name" name="name" onChange={this.updateParam} value={this.state.name} placeholder="Your full name.."/>
           <span style={{color: "red"}}>{this.state.errors["name"]}</span>
         </div>
        </div>
    );
  }
}
export default App;

＆＃13;

＆＃13;

＆＃13;

在App.css文件中我有这个css代码

＆＃13;

＆＃13;

.error{
  border: 2px solid red;
}

＆＃13;

＆＃13;

＆＃13;

以上代码适合我。请注意，此片段不会直接在此处运行，因为我没有包含react脚本。但是，您可以在计算机上试用此代码。

由于