如何在一个 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))}