ReactJS：从表单中获取数据

Question

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

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>
    );
  }
}

我正在使用material-ui。

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

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

Answer 1

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

// 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)}
/>

Answer 2

让它更新onChange 的状态。调用一个函数并传入问题对象。然后设置状态。您的状态将始终与表单保持同步，当您提交时，您可以获得当前状态