我有一系列问题正在被提取并添加到状态中,看起来像这样:
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。
当用户提交表单时,获取用户在这些输入中输入的数据的最佳方式是什么?
我想不出一个简单的方法来完成这个任务。是否有函数可以在提交表单时获取表单中的所有数据?
最佳答案
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)}
/>
关于javascript - ReactJS:从表单获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51584905/