Question

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

任何建议，不胜感激！ =）

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

Answer 2

您可以将变量保持在状态可以说

state={
    showTooltip:false
}

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

Answer 3

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 个答案: