第一次渲染组件时从默认状态开始！尚未选择心情的地方

Question

我是 reactJs 的新手，我一直在努力寻找如何设法获得图片中附加的设计功能，（情绪渲染得很好）但是当用户进入该屏幕时仍然不能让它成为假第一次没有选择心情。使用 Hooks 如何实现这样的功能？？

import React, { useEffect, useRef, useState, useCallback } from "react";
import {Row, Col} from "react-bootstrap";

import Button from "../../elements/buttons/Button";
import Icon from "../../elements/icons/Icon";
import "./FacialReactions.scss";
import $ from 'jquery';




 export default function Emoji() {

    document.addEventListener("DOMContentLoaded", function() {
        // code...
        const feedbackC = document.querySelector(".feedback");
    const addComment = document.querySelector(".feedback_comment");
    const ratings = document.querySelector(".feedback_ratings");
    const rating = document.querySelectorAll(".feedback_rating");
    const notice = document.querySelector(".feedback_notice");
    const noticeContainer = document.querySelector(".feedback-n");
    
     ratings.addEventListener("click", function (e) {
        const clicked = e.target.closest(".feedback_rating");
        console.log(clicked);
        if (!clicked) return;
    
        rating.forEach((r) => r.classList.remove("rating_active"));
        clicked.classList.add("rating_active");
    
        const data = clicked.dataset.rate;
        const rateEmoji = clicked.textContent.split(" ")[0];
        const rateText = clicked.textContent.split(" ")[1];
        console.log(rateEmoji);
    
        noticeContainer.innerHTML = "";
        const html = `<section class="feedback_notice">
                    <p> ${
                        data < 3
                            ? `Sorry to heard that ${rateEmoji}! Thank you for the feedback `
                            : `${rateText}! Thank you ${rateEmoji}`
                    } </p>
                
        
                </section>`;
    
        noticeContainer.insertAdjacentHTML("afterbegin", html);
    });
    
    
      });

    

    return (
     <>
        <div class="feedback">
        <div className="containerText">
            <div className="text" style={{justifyContent: 'center'}}>
                <span className="first" > How you were feeling </span>&nbsp;
                <span className="second" style={{color: '#FFA196'}}> before you </span>&nbsp;


            </div>
            <span className="third" style={{color: '#FFA196',justifyContent:'center'}}>you used the vibrator ?</span>

        </div>

        <div class="feedback_ratings">
            <span class="feedback_rating" data-rate="1"> <Icon icon="mood-vbad" variant="horizontal" /> </span>
            <span class="feedback_rating" data-rate="2"> <Icon icon="mood-bad" variant="horizontal" /></span>
            <span class="feedback_rating" data-rate="3"> <Icon icon="mood-neutral" variant="horizontal" /></span>
            <span class="feedback_rating" data-rate="4">  <Icon icon="mood-good" variant="horizontal" /></span>
            <span class="feedback_rating" data-rate="5">  <Icon icon="mood-vgood" variant="horizontal" /></span>
        </div>
        <div class="feedback-n">

        </div>

    </div>
     </>
    );
  };

Answer 1

在 ReactJS 中，您可以直接将事件绑定到 HTML 标签，无需手动创建事件监听器。

这很容易用 ReactJS 实现

我在下面的 reactJS hook useState 的帮助下为您提供了简单且对初学者友好的解决方案

但我可以清楚地了解到你对 ReactJS 概念和最佳实践没有基本的了解，我强烈建议你学习 ReactJS 基础知识 here

import React, {useState} from 'react';

   export default function Emoji() {

       const [mood , setMood] = useState(null) //initial state is null, so no mood will be selected by default when component loads
       const [showButton, setShowButton] = useState(false)


 function selected(e) {
   //we run this function on listening to onClick event from the DOM
   setMood(e.target.value) //updating the value of state

         if (mood != null){ 
            setShowButton(true)
           }
    }
 
 return (
       <div>
        <div className="Feedback_rating">
           <button onClick={selected} value="1">Vbad</button>
           <button onClick={selected} value="2">bad</button>
           <button onClick={selected} value="3">neutral</button>
           <button onClick={selected} value="4">good</button>
           <button onClick={selected} value="5">Vgood</button>
        </div>
         
        //using ternary operator to conditionally render markup on the DOM
        {(showButton) ? <button>Next</button> : null}

       </div>
    )
}

如果这段代码对你没有任何意义，你需要开始学习 React。

感谢阅读

第一次渲染组件时从默认状态开始！尚未选择心情的地方

start with the default state upon rendering the component for the first time ! where no mood has been selected yet

reactjs

react-bootstrap

react-hooks