Как вызвать функцию подключения React и передать данные в хранилище Redux в одном событии onClick?

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))}