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

Question

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

onMouseOver:根据鼠标悬停的星形，应填充星形以及悬停星形之前的星形。如果我将星星留在 div 容器中，则不会填充任何星星。 前任。有 4 颗星时，如果我将鼠标悬停在第三颗星上，则应填充星星 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 元素的 fill 属性样式。我陷入困境的是调用 onClick 事件并确保悬停事件不会覆盖样式，因为 onClick 应该胜过 onMouseOver/onMouseLeave。我正在考虑为 svg 元素的 fill 属性分配一个函数，该函数将根据是否单击星星返回三元表达式，但不确定是否可以返回三元表达式。

Answer 1

为了使其运行，我对您的代码所做的唯一更改是将 svg 组件中的 fill 属性更改为以下内容

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

这将检查每个星星的 id 与状态并填写它如果

1. 小于悬停星星的 ID
2. 小于点击的星星的 ID

希望这就是您想要实现的目标。