Question

我正在创建一个评级系统来评估图像。我想将onClick和onMouseOver事件同时应用于我为系统渲染的星星。

onMouseOver：根据鼠标悬停的哪个星，应该在悬停的恒星之前填充恒星和星星。如果我把div容器留下星星，那么就不会有星星被填满。防爆。有4颗星，如果我将鼠标悬停在第3颗星上，那么应该填充1-3颗恒星。如果我没有悬停在任何恒星上，则不应填充星星。

onClick：类似于上面的内容，除非星星悬停在星星上或远离星星，否则星星将被填充。恩。点击星号3，星星1-3将被填写。应保持填写并且onMouseOver / onMouseLeave效果被禁用。

代码链接：https://codesandbox.io/s/k0zmr3m8po

Function to render stars
class Stars extends Component {
    constructor() {
    super()

    this.state = {
      ratingScore: 0,
      starsOnHover: 0
    }

    this.handleOnHoverStars = this.handleOnHoverStars.bind(this)
    this.clearRatingScore = this.clearRatingScore.bind(this)
    this.updateRatingScore = this.updateRatingScore.bind(this)
  }

  handleOnHoverStars(e) {
    e.preventDefault()
    this.setState({
      starsOnHover: e.currentTarget.id
    })
  }

  clearRatingScore(e) {
    e.preventDefault()
    this.setState({
      starsOnHover: 0
    })
  }

  updateRatingScore(e) {
    e.preventDefault()
    this.setState({
      ratingScore: e.currentTarget.id
    })
  }

  renderRatingStars() {
    let stars = []
    for (let i = 0; i < 4; i++) {
      stars.push(
        <a href="#"
          key={i}
          id={i+1}
          onMouseOver={this.handleOnHoverStars}
          onMouseLeave={this.clearRatingScore}
          onClick={this.updateRatingScore}
        >
          <svg width="38" height="36" viewBox="0 0 38 36" preserveAspectRatio="xMidYMid meet">
            <path d="M19.022 29.348L7.577 35.394l2.186-12.806-9.26-9.069L13.3 11.651 19.022 0l5.723 11.65 12.796 1.87-9.26 9.068 2.186 12.806z" fill={i < this.state.starsOnHover ? "#000": "#fff"} stroke="#c2c2c2" strokeWidth="1" fillRule="evenodd"></path>
          </svg>
        </a>
      )
    }
    return stars
  }

  render() {
    return (
      <div>{this.renderRatingStars()}</div>
    )
  }
}

到目前为止，我已经通过更新状态并检查我当前正在悬停的星号来使onMouseEnter和onMouseLeave工作，从而更新了我的svg元素的填充道具样式。我被困的地方然后调用onClick事件并确保悬停事件不会覆盖样式，因为onClick应该胜过onMouseOver / onMouseLeave。我正在考虑为svg元素的填充道具分配一个函数，该函数将返回一个三元表达式，具体取决于是否点击了星号，但不确定是否可以返回三元表达式。

Answer 1

我对您的代码进行的唯一更改是将svg组件中的fill属性更改为以下

fill={i < this.state.starsOnHover || i<this.state.ratingScore ? "#000": "#fff"}

这将检查每个星的身份，并填写，如果

它不及徘徊的明星的身份
小于点击的星标识

希望这是你想要达到的目标。

React - 使用onClick和onMouseOver事件更新样式

1 个答案: