我有一个更新className的TextInput组件。
class TextInput extends React.Component{
constructor(props){
super(props);
this.state = {
errorVisible: false,
textErrorClass: '',
errorMessage: ''
}
this.onChange = this.onChange.bind(this);
}
onChange(ev){
let isValid = true,
errorMessage = '';
const value = ev.target.value;
if(this.props.required && value.length === 0){
isValid = false;
errorMessage = 'Campo obrigatório';
}
else if(this.props.minLength > 1 && value.length < this.props.minLength && value.length > 0){
isValid = false;
errorMessage = `Campo deve possuir pelo menos ${this.props.minLength} caracteres`;
}
this.props.onChange(ev, isValid);
this.setState({
errorVisible: !isValid,
textErrorClass: isValid ? '' : this.props.textErrorClass,
errorMessage,
})
}
render(){
console.log(this.state.errorVisible ? this.props.errorClass : this.props.inputClass);
return(
<div>
<input className={this.state.errorVisible ? this.props.errorClass : this.props.inputClass}
type={this.props.type}
name={this.props.name}
placeholder={this.props.text}
maxLength={this.props.maxLength}
className={this.props.inputClass}
onChange={this.onChange}
defaultValue={this.props.defaultValue}
/>
{this.state.errorVisible && <div className={this.state.textErrorClass}>{this.state.errorMessage}</div> }
</div>
);
}
}
日志控制台. log(此. state. errorVisible?此. props. errorClass:此. props. inputClass)可以正常工作,但className不起作用。
你对这个问题有什么想法吗?
先谢了。
2条答案
按热度按时间ulmd4ohb1#
因为你写了两遍第二遍覆盖了第一遍
保留1并删除2,即
className={this.props.inputClass}
ffx8fchx2#
我有一个解决这个问题的方法。很多时候,如果我们使用变量作为类名,它们不会被更新。我们可以使用内联样式代替。这只是一个快速的黑客,最好找出为什么类名不更新。