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

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 应该胜过鼠标切换/鼠标左转。我正在考虑为svg元素的填充支撑分配一个函数，该函数将根据是否单击星星返回三元表达式，但不确定是否可以返回三元表达式。

Answer 1

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

填充={i

这将检查每颗星星的ID与状态，并填写它，如果

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

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