reactjs - React 中的 OnClick 事件在子组件中不起作用
问题描述
我阅读了“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
解决方案
您的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"}
/>
);
};
推荐阅读
- dita - minOccurs maxOccurs 不适用于dita?
- javascript - 将表连接到带有数组字段的 json 中
- docker - 最后使用 docker-compose 命令
- linear-regression - 模型学习了,但无法预测?
- jquery - 使用 ajax 更新 div 的内容后,卡片向上扩展而不是向下扩展
- azure - 我需要将各种选择语句中的数据推送到 Azure SQL 数据库,最好的方法是什么?
- node.js - React Node 应用程序在下载文件时崩溃
- python - 使用 cookiecutter-flask 时出现“地址已在使用”错误
- javascript - 传递一个回调函数并从中创建一个 Observable
- html - 下拉菜单占用新空间而不是相对位置