使用 React.JS 未按预期呈现星级按钮

Question

所以我的星形按钮显示在我的 UI 上。正如预期的那样，但没有渲染。我可以通过在状态函数中更改 CurrentRating 的整数值来更改它们的输出，无论我将其更改为 1、2、3 等。但就是这样。

点击任何按钮后，该按钮上的星号和它前面的星号都应该变成红色。

我错过了什么？

这是我的代码：

card.js ///

 import React, { Component } from "react";


 import { Stars } from "./stars";

 export class Card extends Component {
 // Initiatte clicks at 0
 constructor(props) {
   super(props);
   this.state = {


   CurrentRating: 0,
 };
}

// Rate your instructor
handleRating = (value) => {
  console.log("Rating declared");
this.setState({ CurrentRating: value });
};
///

render() {
  // Create a variable for Star rating
  const Rating = this.state.CurrentRating;

  return (
  <React.Fragment>
    <div className="container">
      

      <div className="stars">
        <p>Your rating is {Rating}</p>
        <Stars rating={Rating} onClicked={this.handleRating} />
      </div>
    </div>
  </React.Fragment>
  );
 }
}

export default Card;

stars.CSS ///

.active {
color: red;
}

stars.js ///

import React, { Component } from "react";
import "./stars.css";


export class Stars extends Component {
///
render() {
// Sample props
  const Rating = this.props.rating;
  console.log("[Stars] Render, Rating=" + Rating);

  /// Render or Genrate markup.
  return (
  <div>
    {Rating >= 1 && (
      <button
        className="active"
        onClick={this.onClicked}
        style={{ cursor: "pointer" }}
      >
        ★
      </button>
    )}

    {Rating < 1 && (
      <button onClick={this.onClicked} style={{ cursor: "pointer" }}>
        ★
      </button>
    )}

    {Rating >= 2 && (
      <button
        className="active"
        onClick={this.onClicked}
        style={{ cursor: "pointer" }}
      >
        ★
      </button>
    )}

    {Rating < 2 && (
      <button onClick={this.onClicked} style={{ cursor: "pointer" }}>
        ★
      </button>
    )}

    {Rating >= 3 && (
      <button
        className="active"
        onClick={this.onClicked}
        style={{ cursor: "pointer" }}
      >
        ★
      </button>
    )}

    {Rating < 3 && (
      <button onClick={this.onClicked} style={{ cursor: "pointer" }}>
        ★
      </button>
    )}

    {Rating >= 4 && (
      <button
        className="active"
        onClick={this.onClicked}
        style={{ cursor: "pointer" }}
      >
        ★
      </button>
    )}

    {Rating < 4 && (
      <button onClick={this.onClicked} style={{ cursor: "pointer" }}>
        ★
      </button>
    )}

    {Rating >= 5 && (
      <button
        className="active"
        onClick={this.onClicked}
        style={{ cursor: "pointer" }}
      >
        ★
      </button>
    )}

    {Rating < 5 && (
      <button onClick={this.onClicked} style={{ cursor: "pointer" }}>
        ★
      </button>
    )}
   </div>
  );
 }
}

App.js ///

 import './App.css';

 import { Card } from './card';

 function App() {
   return (
     <div className="App">
     <header className="App-header">
   
      <Card />
   
    </header>
  </div>
  );
 }

 export default App;

Answer 1

问题在于单击按钮时调用的函数

 <button onClick={this.onClicked} 

首先，这应该是this.props.onClicked，因为函数作为道具传入（而不是在 Stars 类本身上）。

其次，您需要在函数中传递评分的实际值。即

 <button onClick={() => this.props.onClicked(1)} 

如果我在第一个按钮上进行上述更改并单击它，它会变成红色