css - 嗨，类不适用于焦点上的输入元素

Question

我目前正在尝试根据其验证将红色类应用于输入元素。如果输入元素无效，那么我将红色的状态更新为红色类。这行得通，但是我将红色类应用于没有焦点的输入元素。第一次输入无效，红色类不适用。然而，一旦输入元素没有焦点，它就会应用样式并保持这样，即使在焦点或没有焦点之后也是如此。我究竟做错了什么。有人可以帮忙吗谢谢。

handle_validate = (event) => {
    if((event.target.value.length > 0  && this.state.has_focus) || (event.target.value.length === 0 && this.state.has_focus)){
        if (!event.target.validity.valid) {
            if (event.target.validity.patternMismatch) {
                this.setState({is_valid: false});
                this.setState({red: 'red'});
            }else {
               this.setState({red: ''});
            }};
          return (
             <div>
                 <input {...rest}
                    className={this.state.red }/>
             </div>


input.red{
    border-color: red;
}

Answer 1

如果您的问题是您希望仅在焦点上应用样式，则需要执行以下操作:

input.red:focus { 
    border-color: red;
}

这也意味着当没有焦点时，样式就会消失。你不需要 && this.state.has_focus) 位。如果没有焦点，无论如何都不会输入。

但是，您的另一个问题似乎是在没有更多焦点之前不会添加该类。这与 react (我假设这是 react 代码)如何处理用户输入有关。没有更多的代码就无法帮助你。