我有一个简单的网页来获取输入数据:
输入表单:
const Step1 = (props) => {
const { register, handleSubmit } = useForm();
const classes = useStyles();
const { actions, state } = useStateMachine({ updateAction });
const onSubmit = (data) => {
actions.updateAction(data);
props.history.push("./step2");
};
var grid_data=data.map(function(row){return FormRow(row);})
return (
<form onSubmit={handleSubmit(onSubmit)}>
<h2>Enter your data</h2>
{grid_data}
<FormControlLabel
control={<WhiteCheckbox name="Usage_terms" />}
label="I accept Terms of Usage"
style={{ margin: "auto", marginLeft:-10}}
/>
<input type="submit" style={{width: "460px", backgroundColor: "green", marginTop:5 }} />
</form>
);
};
export default withRouter(Step1);
从特殊函数和 json 文件“数据”创建网格数据的地方:
function FormRow( {row_label, row_info, row_mes_unit} ) {
const row_classes=useStyles()
const { register, handleSubmit, formState: { errors } } = useForm();
return ( <React.Fragment>
<Grid item container xs alignItems="flex-end" direction="row">
<Grid item xs>
<input type="number" style={{width: "410px", height:"35px"}} placeholder={row_label} {...register(row_label, {required: true, max: 100, min: 0, maxLength: 100})} />
</Grid>
<Grid item xs={2} justify="flex-end" >
<HtmlTooltip
title={
<React.Fragment>
<Typography color="inherit">Help</Typography>
<p><b>{"Info:"}</b> {row_info} </p>
<p><b>{"Mes. Unit:"}</b> {row_mes_unit}</p>
</React.Fragment>
}
>
<Button className={row_classes.button} style={{
backgroundColor: "inherit",
borderRadius: 5,
}}>
<HelpOutlineIcon className={classNames(row_classes.rightIcon, row_classes.iconSmall)} />
</Button>
</HtmlTooltip>
</Grid>
</Grid>
</React.Fragment>
);
问题是如何在所有请求的字段和复选框都被填写之前禁用提交输入?