Question

当我将鼠标悬停在h1标签中的文本上时，

onmouse不起作用，但是当我单击它时，它在控制台中的打印值。

import React, {
  Component
} from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (event) => {
    let word = event.target.innerText;
    console.log(word)
  }

  render() {
    return (<div>
      <div className="App">
        <h1 onMouseOver = {this.handleClick}>hover Me</h1>
      </div>
    </div>);
  }
}
export default App;

Answer 1

代码工作正常，仅弃用了“ super（props）”部分，这是另一个技巧：使用Arrow函数时，不需要在构造函数中绑定该函数。这是完整的代码：

import React, { Component } from 'react';

class YourComponent extends Component {

    constructor(props) {
        super();
        this.state={};
    }

    handleClick = (event) => {
        let word = event.target.innerText;
        console.log(word)
    }

    render() {
        return (
            <div>
                <div className="App">
                    <h1 onMouseOver={this.handleClick}> hover Me  </h1>
                </div>
            </div>
        );
    }
}

export default YourComponent;

享受;）

onMouseOver无法正常工作？但它作为onClick起作用

1 个答案: