Есть компонента Star, которая затем используется в StarRating. Код Star:
import React from "react";
import { withStyles } from "material-ui-next";
const styles = {
star: {
cursor: "pointer",
height: 25,
width: 25,
margin: 2,
float: "left",
backgroundColor: "grey",
clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
},
selected: {
cursor: "pointer",
height: 25,
width: 25,
margin: 2,
float: "left",
backgroundColor: "green",
clipPath: `polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);`
}
};
const Star = ({ selected = true, classes }) => {
return <div className={selected ? classes.selected : classes.star} />;
};
export default withStyles(styles)(Star);
И есть StarRating, в котором пытаюсь создать какое-то поведение на onClick
import React from "react";
import Star from "./Star";
import { Component } from "react";
class StarRating extends Component {
displayName: "star-rating";
constructor(props) {
super(props);
this.state = {
totalStar: 5,
starSelected: 2
};
this.change = this.change.bind(this);
}
change(starSelected) {
console.log(starSelected);
this.setState({ starSelected });
}
render() {
const { totalStar } = this.state;
const { starSelected } = this.state;
return (
<div>
{[...Array(totalStar)].map((item, index) => (
<Star
// key={index}
onClick={() => console.log("mesage")}
// selected={index < starSelected}
/>
))}
</div>
);
}
}
export default StarRating;
Но onClick не выводит сообщения даже на консоль, то есть по сути не вызывается. Объясните пожалуйста почему не работает и что нужно поправить?