मैं प्रतिक्रिया करने के लिए बहुत नया हूं और उपयोगकर्ता सर्वेक्षण करने की कोशिश कर रहा हूं, इस घटक में मैं चेकबॉक्स के साथ काम कर रहा हूं जो मुझे थोड़ा मुश्किल लगता है। मैं चाहता हूं कि उपयोगकर्ता 2 विकल्प चुनें और फिर दो चुने हुए विकल्पों के बीच अल्पविराम लगाएं, मैं यह कैसे कर सकता हूं?

पहले मैंने अपने समरी.जेएस कंपोनेंट में स्टेजआर्ट कैटेगरी.जॉइन (',') का इस्तेमाल किया था, लेकिन अगर उपयोगकर्ता ने दो विकल्पों के बजाय केवल एक को चुना तो सारांश के प्रतिपादन को तोड़ दिया ...

कोड:

import React from 'react';

import NextQuestionButton from './NextQuestionButton'
import Popup from './Popup'

const QuestionStageArtCheckbox = ({
    stageArtCategory,
  setStageArtCategory,
  page,
  setPage,
  onNextQuestion
}) => {
  const onStageArtChange = (stageArtValue) => {
    if (stageArtCategory.includes(stageArtValue)) {
      setStageArtCategory(stageArtCategory.filter((item) => item !== stageArtValue))
    } else {
      setStageArtCategory([...stageArtCategory, stageArtValue])
    } 
  }
    
  const stageartGroup = [
    "I'm for experimental shit, I need to see something I can not immediately understand", 
    "I want to dance with my kid", 
    "Opera", 
    "Theatre", 
    "Musical", 
    "Concert",
    "I just miss the feeling of collectivity, and long to be able to see something with another person's eye - just once, please!", 
    "I want to drink beer with my friends after a show"
  ]

  return (
    <article className="form-question-3">
      {/* Q */}
      <p className="form-question" tabIndex="0">
        What kind of stage art would you like too experience post Covid-19? Pick 2 as they are made to overlap a little! <span role="img" aria-label="smiling emoji with one eye blinking">😊</span>
      </p>

      {/* A */}
      <div className="question-content-container-3">
        {stageartGroup.map((stagearts) => (
          <span className="form-checkbox-question-container" key={stagearts}>
            <label className="checkbox-label" htmlFor={stagearts}>{stagearts}</label>
            <input
              id={stagearts}
              type="checkbox"
              className="form-checkbox"
              checked={stageArtCategory.includes(stagearts)}
              onChange={() => onStageArtChange(stagearts)}
            />
          </span>
        ))}
          <div className="buttons-container-3">
            <NextQuestionButton
              page={page}
              setPage={setPage}
              currentState={stageArtCategory.length}
              defaultState={0}
              message="Please choose what kind of overlapping stage arts you would like to experience first!"
              onClick={onNextQuestion}
              button="Next question button"
              buttontext="Next question"
            />
          </div>
      </div>
    </article>
  )
}

export default QuestionStageArtCheckbox
1
Caroline 21 मार्च 2021, 10:53

2 जवाब

सबसे बढ़िया उत्तर

उपयोगस्टेट को पहले एक खाली स्ट्रिंग के रूप में प्रारंभ किया गया था लेकिन इसे एक खाली सरणी के रूप में बदल दिया गया था। इससे समस्या हल हो गई।

const [stageArtCategory, setStageArtCategory] = useState([])
0
Caroline 21 मार्च 2021, 12:31

मैं हमेशा ऐसे मूल्यों को सरणी के रूप में देखना पसंद करता हूं। इसलिए, जब भी मुझे इस तरह के मूल्य का उपयोग करने की आवश्यकता होती है, तो मैं इसे .concat विधि से सरणी में बदल देता हूं।

function arbitraryFunction(arrayOrSingle) {
  let array = [].concat(arrayOrSingle);
  // do something with array
}

1
Mr. Hedgehog 21 मार्च 2021, 11:08