禁用提交输入字段,直到所有必填字段和复选框为空

时间:2021-07-17 16:21:50

标签: javascript reactjs material-ui

我有一个简单的网页来获取输入数据:

输入表单:

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

问题是如何在所有请求的字段和复选框都被填写之前禁用提交输入?

0 个答案:

没有答案
相关问题