如何在反应中为 2 个不同的问题制作评级星？

Question

我正在为评分问题创建一个 React 应用程序。我已经尝试用 png 图像对星星进行评级，并且它可以很好地解决 1 个问题。但是当我添加另一个带有该评级星的问题时，它不起作用。

这是我试过的

import React, { Component } from "react";

import fullStarSrc from "../img/highlightedStar.png";
import emptyStarSrc from "../img/star.png";

class joinPage extends Component {
  rate = (event) => {
    const { id } = event.target;

    console.log("clicked: " + id);
    var i;

    for (i = 1; i <= 5; i++) {
      if (i <= parseInt(id)) {
        document.getElementById(i).setAttribute("src", fullStarSrc);
      } else {
        document.getElementById(i).setAttribute("src", emptyStarSrc);
      }
    }
  };
  pro1 = (event) => {
    const { id } = event.target;

    console.log("clicked: " + id);
    var i;

    for (i = 1; i <= 5; i++) {
      if (i <= parseInt(id)) {
        document.getElementById(i).setAttribute("src", fullStarSrc);
      } else {
        document.getElementById(i).setAttribute("src", emptyStarSrc);
      }
    }
  };

  render() {
    return (
      <body>
        <p class="ques">How would you rate our Service?</p>
        <div id="rating0" class="1">
          <img onClick={this.rate} class="star" id="1" src={emptyStarSrc} />
          <img onClick={this.rate} class="star" id="2" src={emptyStarSrc} />
          <img onClick={this.rate} class="star" id="3" src={emptyStarSrc} />
          <img onClick={this.rate} class="star" id="4" src={emptyStarSrc} />
          <img onClick={this.rate} class="star" id="5" src={emptyStarSrc} />
        </div>
        <p class="ques">How would you rate the quality of food?</p>
        <div id="rating0" class="1">
          <img onClick={this.pro1} class="star" id="1" src={emptyStarSrc} />
          <img onClick={this.pro1} class="star" id="2" src={emptyStarSrc} />
          <img onClick={this.pro1} class="star" id="3" src={emptyStarSrc} />
          <img onClick={this.pro1} class="star" id="4" src={emptyStarSrc} />
          <img onClick={this.pro1} class="star" id="5" src={emptyStarSrc} />
        </div>
      </body>
    );
  }
}

export default joinPage;

我该如何解决这个问题？

Answer 1

因为它有相同的id。您只需更新 id 在第二个速率是

<div id="rating0" class="1">
      <img onClick={this.pro1} class="star" id="6" src={emptyStarSrc} />
      <img onClick={this.pro1} class="star" id="7" src={emptyStarSrc} />
      <img onClick={this.pro1} class="star" id="8" src={emptyStarSrc} />
      <img onClick={this.pro1} class="star" id="9" src={emptyStarSrc} />
      <img onClick={this.pro1} class="star" id="10" src={emptyStarSrc} />
    </div>

并更新 pro1:

pro1 = (event) => {
    const { id } = event.target;

    console.log("clicked: " + id);
    var i;

    for (i = 6; i <= 10; i++) {
      if (i <= parseInt(id)) {
        document.getElementById(i).setAttribute("src", fullStarSrc);
      } else {
        document.getElementById(i).setAttribute("src", emptyStarSrc);
      }
    }
  };

Answer 2

重构代码以使用 React 挂钩和状态而不是改变状态，还将评级添加到新组件。

查看演示沙盒 https://codesandbox.io/s/rough-bird-cy4yy?file=/src/App.js:0-851

import { useState, useEffect } from "react";
import unstar from "./star-unselected.png";
import star from "./star-selected.png";
import _ from "lodash";
import "./styles.css";

function RatingStars({ initRating, onRatingChanged }) {
  const [rating, setRating] = useState(initRating);

  useEffect(() => {
    // if prop changed, we want to reflect that.
    setRating(initRating);
  }, [initRating]);

  function changeRating(newRating) {
    setRating(newRating);
    onRatingChanged(newRating);
  }

  return (
    <div>
      {_.times(5, (index) => (
        <img
          alt="rating stars"
          src={rating >= index + 1 ? star : unstar}
          key={index}
          onClick={() => changeRating(index + 1)}
        />
      ))}{" "}
      <span>has {rating} of 5 stars</span>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <RatingStars
        initRating={3}
        onRatingChanged={(newRating) => {
          console.log(
            `NEW RATING (${newRating}) DETECTED FOR 1.. SAVING TO DB`
          );
        }}
      />
      <RatingStars
        initRating={1}
        onRatingChanged={(newRating) => {
          console.log(
            `NEW RATING (${newRating}) DETECTED FOR 2.. SAVING TO DB`
          );
        }}
      />
    </div>
  );
}

如何在反应中为 2 个不同的问题制作评级星？

How to make rating stars for 2 different question in react?

reactjs

react-rating