反应数据流和回调函数存在问题

问题描述

作为一个新来的人，我仍在掌握如何最好地在React中使用数据流。我有一个正在构建的测验创建应用程序，无法将数据发送回父元素。我知道我应该使用某种回调函数，并尝试创建自己的回调函数但无济于事。基本上，我想从子组件中获取“ textValue”并将其传递回父组件，以便在按下“提交”按钮时将所有输入的文本格式化为测验。

父组件：

import React,{ useState } from 'react'
import Questions from './questions'
import ShowQuiz from './showQuiz'

export default function Truefalse(props) {
  const [questions,setQuestions] = useState([1])

  const [questText,setQuestText] = useState([])

  return (
    <div className="maindisplay">
      <div className="container">
        <div className="questions">
          {questions.length > 0 &&
            questions.map((question,index) => {
              return (
                <div key={index}>
                  <Questions />
                </div>
              )
            })}
        </div>
      </div>
      <div className="counter">
        {questions.length <= 9 ? (
          <button onClick={() => setQuestions([...questions,1])}>
            Add Question
          </button>
        ) : (
          <button onClick={() => setQuestions([...questions])}>
            Add Question
          </button>
        )}
        {questions.length > 0 ? (
          <button
            onClick={() => {
              questions.pop()
              setQuestions([...questions])
            }}
          >
            Delete Question
          </button>
        ) : null}

        <h1>Questions: {questions.length}</h1>
        <button>SUBMIT</button>
      </div>
    </div>
  )
}

子组件：

import React,{ useState } from 'react'
import Paper from '@material-ui/core/Paper'
import Radio from '@material-ui/core/Radio'
import RadioGroup from '@material-ui/core/RadioGroup'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormControl from '@material-ui/core/FormControl'
import Formlabel from '@material-ui/core/Formlabel'

export default function Questions(props) {
  const [value,setValue] = React.useState('True')
  const [textValue,setTextValue] = useState('')

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  const handleTextChange = (event) => {
    setTextValue(event.target.value)
  }

  return (
    <div className="quiz-question">
      <Paper elevation={3}>
        <FormControl component="fieldset">
          <Formlabel component="legend">Answer</Formlabel>
          <RadioGroup
            row
            aria-label="gender"
            name="gender1"
            value={value}
            onChange={handleChange}
          >
            <FormControlLabel value="True" control={<Radio />} label="True" />
            <FormControlLabel value="False" control={<Radio />} label="False" />
          </RadioGroup>
          <textarea
            name="text"
            id="questionText"
            value={textValue}
            onChange={handleTextChange}
            cols="30"
            rows="10"
            style={{ resize: 'none' }}
          ></textarea>
        </FormControl>
      </Paper>
      {textValue}
    </div>
  )
}

同样，我想从子组件中获取textValue状态，并以某种方式传递回父组件以显示，因为我正在使用父组件在单击“提交”按钮时显示测验信息。

我很乐意提供任何帮助或技巧，因为我一直在转动方向盘已有一段时间，试图在询问堆栈溢出之前使它起作用。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dataflow reactjs reactjs