反应：在悬停时呈现“请填写此字段”警告

Posted 2023-02-22

【中文标题】反应：在悬停时呈现“请填写此字段”警告

【英文标题】：REACT: Rendering a "please fill out this field" warning On Hover

【发布时间】：2019-12-08 05:37:48

【问题描述】：

大家好。 我正在尝试在未填写电子邮件输入时发出此“警报”。我知道我将需要 onHover 处理程序，该处理程序在值 ==“”时专门呈现该框。但是，我不确定如何做到这一点，例如，如果输入尚未填写，或者是否有更好的方法，我是否应该在该位置渲染一个 div？

任何建议表示赞赏！ =)

【问题讨论】：

这可能会帮助你***.com/a/14608892/7586354

【参考方案1】：

尝试这样的事情，不确定这是否能回答问题

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

【参考方案2】：

import React,  useState  from 'react'

const InputWithToolTip = () => 
  const [text, setText] = useState("")
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <>
      <input 
        value=text
        onChange=(target: value) => setText(value)
        onMouseEnter=() => setIsHovered(true)                   
        onMouseLeave=() => setIsHovered(false)
      />
      
        isHovered &&
        <span>I'm a tool tip!</span>
      
    </>
  )

【参考方案3】：

你可以在状态中维护一个变量 让我们说

state=
    showTooltip:false

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

【讨论】：

您能否详细说明工具提示的外观？谢谢。