如何通过单击按钮从多个选择输入中获取所有值？ 反应

Question

我正在创建一个调查问卷，其中收集并平均选择输入的值以产生分数。 看起来很容易，但我正在努力获得它们。 目前我的目标只是获取开始的值，但似乎我只能在单击提交按钮时获取最后一个选择输入的值，调用handleClick()事件。

我不确定我是否做得对。 通过一些指南，我看到其他人使用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>
  )
}

Answer 1

如果要使用 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> ) }