Блог

Я хочу запустить две функции одним щелчком мыши. У меня есть компонент для создания «Звездного рейтинга» и «Раздела комментариев», где пользователь может вводить комментарии и отправлять. Во время отправки я хочу вызвать раздел оценки звезд и комментариев. Моя проблема в «Разделе комментариев», который я использую onChange, а затем конвертирую его в onclick. Но при отправке он выдает ошибку типа «btnSubmit», которая не является функцией. Может ли кто-нибудь помочь мне добиться результата? Заранее спасибо. Ниже приведен мой код.

 function StarRaating(props) {
  const { BtnSubmit } = props;
  let Comment = "";

  function handleChange(e) {
    console.log(e.target.value);
  }
  const Star = ({ selected = false, onClick = (f) => f }) => (
    <div className={selected ? "star selected" : "star"} onClick={onClick} />
  );

  const [starsSelected, selectStar] = useState(0);
  return (
    <div>
      <div className="star-rating">
        {[...Array(5)].map((n, i) => (
          <Star
            key={i}
            selected={i < starsSelected}
            onClick={() => selectStar(i   1)}
          />
        ))}
        <p>{starsSelected}</p>
      </div>
      <div className="">
        <textarea
          name="comment"
          className=""
          placeholder="Add a new comment"
          onChange={handleChange}
        ></textarea>
      </div>
      <div>
        <button
          className="Submit"
          onClick={(e) => {
            BtnSubmit(Comment);
            StarRaating();
          }}
        >
          Submit
        </button>
      </div>
    </div>
  );
}

export default StarRaating;