reactjs - React 中的 OnClick 事件在子组件中不起作用

Question

我阅读了“Learning React”（Alex Banks 和 Eve Porcello）并尝试编写一个不像书中那样简单的颜色管理器应用程序。

目前我在 StarRating 组件中有这样的代码结构。

import React from "react";
import Star from "../components/Star";

import { connect } from "react-redux";
import { rateColor } from "../redux/actions";

const StarRating = ({ currentColor, totalStars, rateColor }) => {
  return (
    <div className="star-wrapper">
      <div className="star-rating">
        {[...Array(totalStars)].map((key, i) => {
          return (
            <Star
              key={i}
              selected={i < currentColor.rating}
              onClick={() => rateColor(currentColor.id, i + 1)}
            />
          );
        })}
      </div>
      <div className="star-stats">
        {currentColor.rating} of {totalStars}
      </div>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    rateColor: (id, rating) => dispatch(rateColor(id, rating))
  };
};

export default connect(
  null,
  mapDispatchToProps
)(StarRating);

添加和删​​除减速器效果很好，但减速器不起作用。当我点击一个星号时，我需要 - 更改所选星星的值......但什么也没发生。

一些“颜色”减速器：

case RATE_COLOR:
      return {
        colors: [...state.colors.map(c => color(c, action))]
      };

和“颜色”减速器：

case RATE_COLOR:
      return state.id !== action.payload.id
        ? state
        : { ...state, rating: action.payload.rating };

所有代码都可以在这里找到 - https://codesandbox.io/s/color-organizer-react-62ubu?file=/redux/reducers/color.js

Answer 1

您的Star组件没有onClick. 确保将点击处理程序从StarRating组件传递到Star组件。

工作演示

星级评分组件

<div className="star-rating">
        {[...Array(totalStars)].map((key, i) => {
          return (
            <Star
              key={i}
              selected={i < currentColor.rating}
              // onClick={() => rateColor(currentColor.id, i + 1)} // remove this
              rateStarClick={() => rateColor(currentColor.id, i + 1)}
            />
          );
        })}

星形组件

const Star = ({ selected = false, rateStarClick }) => {
  return (
    <div
      onClick={rateStarClick}
      className={selected ? "star selected" : "star"}
    />
  );
};