Question

如何在mouseDown事件触发后才能侦听mouseEnter事件？

在以下示例中，我尝试在mouseEnter上选择多个单元格，并在mouseLeave事件上留空。但是，我不知道在哪里放置mouseDown事件并听取其他事件。

＆＃13;

class GameSearchWord extends React.Component {
  constructor(props) {
    super(props)
    this.handleMouseEnter = this.handleMouseEnter.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
    this.state = {
      cells: [
        { id: 1, selected: false },
        { id: 2, selected: false },
        { id: 3, selected: false },
        { id: 4, selected: false },
        { id: 5, selected: false },
        { id: 6, selected: false },
        { id: 7, selected: false },
        { id: 8, selected: false },
        { id: 9, selected: false },
        { id: 10, selected: false },
      ]
    }
  }

  handleMouseEnter(id) {
    this.setState({
      cells: this.state.cells.map(cell => {
        if (cell.id === id) {
          return {
            id,
            selected: true
          }
        }
        return cell
      })
    })
  }

  handleMouseLeave() {
    this.setState({
      cells: this.state.cells.map(cell => ({
        id: cell.id,
        selected: false
      }))
    })
  }

  render() {
    return (
      <ul>
        {this.state.cells.map(cell => (
          <li
            key={cell.id}
            className={cell.selected ? 'active' : ''}
            onMouseEnter={() => this.handleMouseEnter(cell.id)}
            onMouseLeave={() => this.handleMouseLeave()}>
          </li>
        ))}
      </ul>
    )
  }
}

ReactDOM.render(<GameSearchWord />, document.getElementById('root'))

＆＃13;

li {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  list-style-type: none;
}

.active {
  background-color: red
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<body>
  <div id="root"></div>
</body>

＆＃13;

有什么建议吗？谢谢！

仅在mouseDown事件之后执行侦听mouseEnter事件

0 个答案: