reactjs 状态更改时,react className不更新

lh80um4z  于 2023-01-30  发布在  React
关注(0)|答案(2)|浏览(214)

我有一个更新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不起作用。
你对这个问题有什么想法吗?
先谢了。

ulmd4ohb

ulmd4ohb1#

因为你写了两遍第二遍覆盖了第一遍

<input
   className={this.state.errorVisible ? this.props.errorClass : this.props.inputClass}
   //...
   className={this.props.inputClass}
 />

保留1并删除2,即className={this.props.inputClass}

ffx8fchx

ffx8fchx2#

我有一个解决这个问题的方法。很多时候,如果我们使用变量作为类名,它们不会被更新。我们可以使用内联样式代替。这只是一个快速的黑客,最好找出为什么类名不更新。

相关问题