Как я могу получить все значения из нескольких выбранных входов одним нажатием кнопки? реагировать - PullRequest
Новая
       21

Как я могу получить все значения из нескольких выбранных входов одним нажатием кнопки? реагировать

0 голосов
/ 01 апреля 2020

Я создаю анкету, в которой значения выбранных входных данных собираются и усредняются для получения оценки. Кажется, достаточно легко, но я изо всех сил пытаюсь получить их. В настоящее время моя цель - просто получить значения для начала, но, похоже, я могу получить значение только для последнего выбранного ввода, когда нажимаю кнопку отправки, вызывая событие handleClick().

I ' Я не уверен, правильно ли я делаю. В некоторых руководствах я видел, как другие используют функцию useRef(), но я также видел и createRef().

Я использую Gatsby JS и GraphQL для запроса данных. Я ценю любой совет. 

const Questionnaire = (props: Props) => {
  const data = props.data!
  const questionnaire = data.allContentfulQuestionnaire.edges
  let i = 0

  const selectInput = useRef()

  const handleClick = () => {
    for (const r in selectInput) {
      console.log("foo: ", selectInput.current.value)
      console.log("bar: ", r.valueOf())
    }
  }

  return (
    <Layout>
      <Container>
        {questionnaire?.map(({ node }: any) => (
          <>
            <h2>{node?.title}</h2>
            {node?.questions?.map(({ answers, question }: any) => (
              <Question key={question?.id}>
                <P>
                  {++i}. {question?.question}
                </P>

                <select key={question?.id} ref={selectInput}>
                  <option>Select Response</option>
                  {answers.map(({ title, id, score }: any) => (
                    <option key={id} value={score}>
                      {title}
                    </option>
                  ))}
                </select>
              </Question>
            ))}
          </>
        ))}

        <Submit onClick={handleClick}>Submit</Submit>
      </Container>
    </Layout>
  )
}

1 Ответ

0 голосов
/ 01 апреля 2020

Если вы хотите go с ref, вам нужно n ref для n полей / выберите 

const Questionnaire = (props: Props) => {
  const data = props.data!
  const questionnaire = data.allContentfulQuestionnaire.edges
  let i = 0

  const refs = node?.questions?.map(q => q.node?.questions?.map(useRef));

  const handleClick = () => {
    // You have nested array of refs so you can get the desired values
    console.log(refs[0][0].current.value);
  }

  return (
    <Layout>
      <Container>
        {questionnaire?.map(({ node }: any, outerIndex) => (
          <>
            <h2>{node?.title}</h2>
            {node?.questions?.map(({ answers, question }: any, innderIndex) => (
              <Question key={question?.id}>
                <P>
                  {++i}. {question?.question}
                </P>

                <select key={question?.id} ref={refs[outerIndex][innderIndex]}>
                  <option>Select Response</option>
                  {answers.map(({ title, id, score }: any) => (
                    <option key={id} value={score}>
                      {title}
                    </option>
                  ))}
                </select>
              </Question>
            ))}
          </>
        ))}

        <Submit onClick={handleClick}>Submit</Submit>
      </Container>
    </Layout>
  )
}
...