Question

我在更改onMouseEnter事件上的选定元素时遇到麻烦。我有两个相同的元素，我想更改将鼠标移到的当前元素的样式。

class Form extends React.Component{
    constructor(props){
        super(props);
        this.mouseEnter = this.mouseEnter.bind(this);
        this.state = {
            visibility: 'hidden',
        }
    }
    mouseEnter(e){
        if(e.currentTarget.dataset.id) {
            this.setState({
                visibility: 'visible',
            })
        }
    };

    render() {
        return <div className="form">
            <div className="head_form">
                <div className="head_icon"></div>
            </div>
            <form>
                <p className="inputs">EMAIL ADDRESS</p>
                <div className="required" style={this.state}>required</div>
                <div className="inputs_container">
                    <input type="email" placeholder="Enter your email address"/>
                    <div className="triangle" data-id="1" onMouseEnter={this.mouseEnter}></div>
                </div>
                <p className="inputs">PASSWORD</p>
                <div className="required">required</div>
                <div className="inputs_container">
                    <input type="password" placeholder="Enter your password"/>
                    <div className="triangle" data-id="2" onMouseEnter={this.mouseEnter}></div>
                </div>

Answer 1

您可以将每个元素的className设置为状态，然后通过每个元素的状态更改来更新className。

在我的示例中，我还为每个元素分配了一个名称，并在mouseEnter和mouseLeave函数中指定了它们的名称。

示例：

class Form extends React.Component{
    constructor(props){
        super(props);
        this.mouseEnter = this.mouseEnter.bind(this);
        this.mouseLeave = this.mouseLeave.bind(this);
        this.state = {
            emailInput: 'triangle',
            passwordInput: 'triangle'
        }
    }
    mouseEnter(e){
            this.setState({
                [e.target.name]: 'circle',
            })
    };

    mouseLeave(e){
            this.setState({
                [e.target.name]: 'triangle',
            })
    };

    render() {
        return <div className="form">
            <div className="head_form">
                <div className="head_icon"></div>
            </div>
            <form>
                <p className="inputs">EMAIL ADDRESS</p>
                <div className="required" style={this.state}>required</div>
                <div className="inputs_container">
                    <input type="email" placeholder="Enter your email address"/>
                    <div className={this.state.emailInput} name="emailInput" data-id="1" onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}></div>
                </div>
                <p className="inputs">PASSWORD</p>
                <div className="required">required</div>
                <div className="inputs_container">
                    <input type="password" placeholder="Enter your password"/>
                    <div className={this.state.passwordInput} name="passwordInput" data-id="2" onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}></div>
                </div>

Answer 2

这不是最佳解决方案，我更喜欢使用CSS类（例如.item-visible）。

但是我认为我可以通过JSFiddle帮助您，以帮助您了解其工作方式：https://jsfiddle.net/d9rfbu5n/

这是小提琴中的代码：

class Form extends React.Component{
    constructor(props){
        super(props);
        this.mouseEnter = this.mouseEnter.bind(this);
        this.mouseLeave = this.mouseLeave.bind(this);
        this.state = {
            inputWithMouseOn:-1
        }
    }
    mouseEnter(e){
        if(e.currentTarget.dataset.id) {

              this.setState({inputWithMouseOn:parseInt(e.currentTarget.dataset.id)})
        }
    }

    mouseLeave(e){
        if(e.currentTarget.dataset.id) {
            if(parseInt(e.currentTarget.dataset.id) === this.state.inputWithMouseOn){
                this.setState({inputWithMouseOn:-1})
            }
          }
        }

    render() {
        var inputOnestyle = this.state.inputWithMouseOn === 1 ? {visibility:"visible"} : {visibility:"hidden"};
        var inputTwoStyle = this.state.inputWithMouseOn === 2 ? {visibility:"visible"} : {visibility:"hidden"};

        return (<div className="form">
            <form>
              <p className="inputs">EMAIL ADDRESS</p>
              <div className="required" style={inputOnestyle}>required</div>
              <div className="inputs_container">
                <input type="email" placeholder="Enter your email address"/>
                <div className="triangle" data-id="1" onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>AAAA</div>
              </div>
              <p className="inputs">PASSWORD</p>
              <div className="required" style={{visibility:this.state.inputWithMouseOn === 2 ? "visible" : "hidden"}}>required</div>
              <div className="inputs_container">
                <input type="password" placeholder="Enter your password"/>
                <div className="triangle" data-id="2" onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>AAAA</div>
              </div>
              </form>
              </div>
           );
        }
    }

ReactDOM.render(
    <Form name="World" />,
    document.getElementById('container')
);

更改选定的元素onMouseEnter- React

2 个答案: