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）位。如果没有焦点，什么也不会输入。

但是，您的另一个问题似乎是直到没有更多的关注点时才添加该类。这与反应（我假设这是反应代码）如何处理用户输入有关。没有更多代码，就无法为您提供帮助。

嗨，课程不适用于焦点上的输入元素

1 个答案: