reactjs - 如何在一个 onClick 事件中调用 React 钩子函数并将数据传递到 Redux 存储?
问题描述
我正在尝试制作一个更改颜色并将其值传递给 Redux 存储的组件,但我在实现它时遇到了困难。
当我添加一个将颜色更改为 onClick 事件的函数时,它可以工作。当我添加第二个传递值的函数时,只有第二个函数执行。
我试图将这两个函数放在另一个函数中,但它不起作用。
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import * as actionTypes from "../../store/Actions";
import { CSSTransition } from "react-transition-group";
import "./Shirts.scss";
import white from "../../assets/white.jpg";
import black from "../../assets/black.jpg";
import grey from "../../assets/grey.jpg";
const shirts = { white, black, grey };
function Shirts() {
const [selected, setSelected] = useState(shirts.black);
const selectedPoster = useSelector(state => state.poster);
const dispatch = useDispatch();
const passColor = e =>
dispatch({ type: actionTypes.PASS_COLOR, payload: e.currentTarget.value });
const changeColor = () => {
setSelected(shirts.white);
};
return (
<div>
<div className="shirts">
<CSSTransition
in={true}
key={shirts}
appear={true}
timeout={300}
classNames="fade"
>
<img alt="T-Shirt" className="shirt" src={selected} />
</CSSTransition>
</div>
<div>
<img className="selected-poster" alt="Poster" src={selectedPoster} />
</div>
<div className="color-picker">
<button
className="white-button"
value="White"
onClick={(changeColor, passColor)}
>
<p className="white-text">
W<br />
H<br />
I<br />
T<br />E
</p>
</button>
<button
className="grey-button"
value="Grey"
onClick={(() => setSelected(shirts.grey), passColor)}
>
<p className="grey-text">
G<br />
R<br />
E<br />Y
</p>
</button>
<button
className="black-button"
value="Black"
onClick={(() => setSelected(shirts.black), passColor)}
>
<p className="black-text">
B<br />
L<br />
A<br />
C<br />K
</p>
</button>
</div>
</div>
);
}
export default Shirts;
解决方案
the correct syntax is:
onClick={((e) => setSelected(shirts.grey), passColor(e))}
推荐阅读
- dart - 如何转换地图
到地图 在飞镖? - mongodb - 如何在 mongo 查询中执行嵌套查找?
- python - 将对象正确导入烧瓶?Flask 无法导入姓名邮件
- spring-boot - java.lang.NoSuchMethodError:org.springframework.web.reactive.socket.client.ReactorNettyWebSocketClient。
(Ljava/util/function/Consumer;)V - scala - Kafka:是否有用于 scala 的 Kalfa 客户端 API?
- object - 对象的ES6过滤器数组是否存在属性
- arrays - 如何以编程方式列出 Ruby 中 Array 的所有方法?
- c# - Jquery将项目从一个列表框移动到另一个列表框
- reactjs - 如何在 React 中创建自定义表格?
- c# - 如何组合列表的元素?(C#)