Javascript ReactJS：从表单获取数据

我有一系列的问题被提取并添加到状态中，看起来是这样的：

gigApplication: {
    title: 'Tell me about you',
    questions: [
      {
        title: 'do you know german?',
        type: 'radiobox',
        options: ['yes', 'no']
      },
      {
        title: 'what are you hobbies?',
        type: 'input',
        options: []
      },
      {
        title: 'do you know any of the following languages?',
        type: 'checkbox',
        options: ['spanish', 'italian', 'chinese', 'portuguese', 'esperanto']
      },
      {
        title: 'what countries what you been to??',
        type: 'checkbox',
        options: ['brazil', 'china', 'france']
      }
    ]
  }

然后我根据问题类型来呈现它

render() {
    const { handleClose, openApply, gigApplication, classes, fullScreen } = this.props;
    const questions = gigApplication.questions.map((question, index) => {
      if (question.type === 'input') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            <TextField margin="dense" id="name" type="email" fullWidth />
          </DialogContent>
        );
      }
      if (question.type === 'checkbox') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            {question.options.map(option => (
              <FormControlLabel
                key={option}
                control={
                  <Checkbox
                    checked={this.state.jason}
                    // onChange={this.handleCheckBox(option)}
                    color="primary"
                    value={option}
                    name={question.title}
                    onClick={this.handleCheckBox(option, question, index)}
                  />
                }
                label={option}
              />
            ))}
          </DialogContent>
        );
      }
      if (question.type === 'radiobox') {
        return (
          <DialogContent key={question.title} className={classes.dialogContent}>
            <DialogContentText>{question.title}</DialogContentText>
            {question.options.map(option => (
              <RadioGroup
                 key={option}
                 name={question.title}
                 className={classes.group}
                 value="yes"
                 value={option}
                 onChange={this.handleChange}
               >
                <FormControlLabel
                  name={question.title}
                  value={option}
                  control={<Radio color="primary" />}
                  label={option}
                />
              </RadioGroup>
            ))}
          </DialogContent>
        );
      }
    });
    return (
      <FormControl onSubmit={this.handleSubmit}>
        <Dialog
          fullWidth
          className={classes.dialog}
          open={openApply}
          onClose={handleClose}
          fullScreen={fullScreen}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">{gigApplication.title}</DialogTitle>
          {/* questions come from the const above */}
          {questions}
          <DialogActions>
            <Button onClick={handleClose} color="primary">
              Cancel
            </Button>
            {/* <Button onClick={handleClose} color="primary">
              Send Application
            </Button> */}
            <Button type="submit" color="primary">
              Send
            </Button>
          </DialogActions>
        </Dialog>
      </FormControl>
    );
  }
}

render（）{
const{handleClose，openApply，gigaapplication，classes，fullScreen}=this.props；
const questions=gigaapplication.questions.map（（问题，索引）=>{
如果（question.type==='input'）{
返回(
{问题.标题}
);
}
如果（question.type==='checkbox'）{
返回(
{问题.标题}
{question.options.map（option=>(
))}
);
}
if（question.type==='radiobox'）{
返回(
{问题.标题}
{question.options.map（option=>(
))}
);
}
});
返回(
{gigaapplication.title}
{/*问题来自上面的常量*/}
{问题}
取消
{/* 
发送申请
*/}
发送
);
}
}

我使用的是材料界面

当用户提交表单时，获取用户在这些输入中输入的数据的最佳方式是什么

---

我想不出一个简单的方法来完成它。是否有函数在提交表单时从表单中获取所有数据

让它在

onChange

上更新状态。调用函数并传入问题对象。然后设置状态。您的状态将始终是表单的最新状态，当您提交时，您只需获取当前状态

就可以让它在

onChange

上更新状态。调用函数并传入问题对象。然后设置状态。您的状态将始终是表单的最新状态，当您提交表单时，您可以只获取当前状态

最惯用的反应是使用父组件的状态来存储表单值。在处理提交事件期间，您可以轻松访问它

// class method
onChange = e => this.setState({
  [e.target.name]: e.target.type === 'checkbox'
    ? e.target.checked
    : e.target.value,
});

// somewhere in render
<TextField onChange={this.onChange} margin="dense" id="name" type="email" fullWidth />
...
<Checkbox
  checked={this.state.jason}
  onChange={this.onChange}
  color="primary"
  value={option}
  name={question.title}
  onClick={this.handleCheckBox(option, question, index)}
/>

//类方法
onChange=e=>this.setState({
[e.target.name]：e.target.type==='复选框'
？e.目标已检查
：e.目标值，
});
//在渲染的某处
...

最惯用的反应是使用父组件的状态来存储表单值。在处理提交事件期间，您可以轻松访问它

// class method
onChange = e => this.setState({
  [e.target.name]: e.target.type === 'checkbox'
    ? e.target.checked
    : e.target.value,
});

// somewhere in render
<TextField onChange={this.onChange} margin="dense" id="name" type="email" fullWidth />
...
<Checkbox
  checked={this.state.jason}
  onChange={this.onChange}
  color="primary"
  value={option}
  name={question.title}
  onClick={this.handleCheckBox(option, question, index)}
/>

//类方法
onChange=e=>this.setState({
[e.target.name]：e.target.type==“复选框”
？e.目标已检查
：e.目标值，
});
//在渲染的某处
...

我尝试过这样做，但复选框选项出现了问题，因为在用户选择新选项时，或当用户返回问题时，我必须始终创建一个新对象。我想知道是否有办法从输入中获取值？就像我给每个输入命名一样，当用户提交时，我只需从这些输入中获取值，

onChange

中复选框的值位于

event.target.checked

@EmersonLopes，您可以遍历表单的子元素并收集DOM元素的值，但在React中，我们将重点明确地放在状态上，而不是这一点，从DOM级别的交互中抽象出来我尝试过这样做，但是复选框选项出现了问题，因为在用户选择新选项时，或者当用户返回问题时，我必须始终创建一个新对象。我想知道是否有办法从输入中获取值？就像我给每个输入命名一样，当用户提交时，我只需从这些输入中获取值，

onChange

中复选框的值位于

event.target.checked

@EmersonLopes，您可以遍历表单的子元素并收集DOM元素的值，但在React中，我们将重点明确地放在状态上，而不是这一点，从DOM级交互中抽象出来