使用 Javascript 在 ReactJs 中对操作进行类操作

Using Javascript to class manipulation in ReactJs

本文关键字：操作 Javascript ReactJs 使用      更新时间：2023-09-26
在

ReactJS项目中使用Javascript代码是否有效？我有这样的东西，

.JS

myFunc(e) {
     let v = e.target.value
     if(v.length > 0) {
         e.target.parentNode.setAttribute('class', 'abc')
     }
     else {
         e.target.parentNode.setAttribute('class', 'xyz')
     }
}

.HTML

<input ref="xxx" onBlur={this.myFunc.bind(this)} name="xxx" className="xxx" type="text">

这种方法按照我想要的方式工作，但不确定在 ReactJs 中使用此类代码是否安全。请告诉我。

它有效，但通常这不是推广的方式。由于我不知道您的其余代码中到底发生了什么，以下是我基于您上面输入的实现：

export default class BlurrableInput extends React.Component {
    constructor() {
        this.state = {
             text = null
        };
    }
    handleInputBlur() {
        console.log('Hello from blur');
    }
    handleInputChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    render() {
        let className = this.state.text !== null && this.state.text.length > 0 ? 'abc' : 'xyz';
        return(
            <input 
                 ref='xxx' 
                 onBlur={this.handleInputBlur} 
                 value={this.state.text} 
                 name='xxx' 
                 className={className} 
                 type='text' />
        );
    }
}

附言。对于类名生成，我可以强烈推荐这个库。

相关文章：