时间戳

首页 > 解决方案 > 嗨，类未应用于焦点上的输入元素

css - 嗨，类未应用于焦点上的输入元素

问题描述

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

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;
}

标签： cssreactjs

解决方案

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

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

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

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

推荐阅读