如何在一个onClick事件中调用React钩子函数并将数据传递给Redux存储?

Question

我正在尝试制作一个更改颜色并将其值传递给 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;

Answer 1

正确的语法是：

onClick={((e) => setSelected(shirts.grey), passColor(e))}