Javascript 反应：呈现一个；请填写此字段“；悬停警告

大家好。 我试图在电子邮件输入尚未填写时发出此“警报”。我知道我需要一个onHover处理程序，当它的值==“”时，该处理程序专门呈现该框。但是，我不知道如何准确地进行，例如，如果输入没有填写，或者如果有更好的方法，我应该在该位置渲染一个div

任何建议，谢谢！

---

=）

试试这样的方法，不确定这是否回答了问题

class Test extends Component {

    constructor() {
        this.state = {
            email: '',
            showAlert: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleHover = this.handleHover.bind(this);
    }

    handleChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    handleHover(e) {
        this.setState({
            showAlert: !e.target.value
        });
    }

    render() {
        return(
            <div>
                <input 
                    name='email' 
                    value={this.state.email} 
                    onChange={this.handleChange}
                    onMouseEnter={this.handleHover}  
                />

                {this.state.showAlert 
                    ? <span>Please fill this field</span> 
                    : null }

            </div>
        );
    }
}

类测试扩展了组件{
构造函数（）{
此.state={
电子邮件：“”，
showAlert:错误
}
this.handleChange=this.handleChange.bind（this）；
this.handleHover=this.handleHover.bind（this）；
}
手变（e）{
这是我的国家({
[e.target.name]：e.target.value
});
}
手悬停（e）{
这是我的国家({
showAlert:！e.target.value
});
}
render（）{
返回(
{this.state.showart
请填写此字段
：null}
);
}
}

您可以在状态中维护变量 比方说

在onHover处理程序中，您可以检查==''值并更新将重新呈现组件的状态，并根据状态值呈现工具提示警告

import React，{useState}来自“React”
constInputWithToolTip=（）=>{
const[text，setText]=useState（“”）
const[isHovered，setIsHovered]=使用状态（false）；
返回(
setText（值）}
onMouseCenter={（）=>setIsHovered（true）}
onMouseLeave={（）=>setIsHovered（false）}
/>
{
我发现&&
我是一个工具提示！
}
)
}

这可能会对您有所帮助。您能详细介绍一下工具提示的外观吗？谢谢

state={
    showTooltip:false
}