反应尝试从引导程序转换为 Material UI

Question

我有一个 react 应用程序，我正在尝试将其从 bootstrap 转换为 Matrial-UI，但是当我尝试将模式从 bootstrap 更改为 material-ui 时，表单不起作用。没用过material-ui，有点迷茫

这是我的引导程序

    <LocalForm className="container" onSubmit={(values)=>this.handleComment(values)}>


                              <Grid md={12}>
                                  <Label htmlFor="name">Your Name</Label>
                                  <Control.text model=".name" id="name" name="name" className="form-control" placeholder="Your Name"validators={{ minLength:minLength(3),maxLength:maxLength(15) }} />
                                  <Errors className="text-danger" model=".name" show="touched" messages={{
                                          minLength:'At least 3 characters',
                                          maxLength:'Must be 15 characters or less'
                                      }} />
                              </Grid> 
                              <Grid md={12}>
                                  <Label htmlFor="email">Your Email</Label>
                                  <Control.text model=".email" id="email" name="email" className="form-control" placeholder="Your Email"validators={{ minLength:minLength(3) }} />
                                  <Errors className="text-danger" model=".email" show="touched" messages={{
                                          minLength:'At least 3 characters'                                            
                                      }} />
                              </Grid>
                              <Grid className="form-group" md={12}>
                                  <Label htmlFor="body"> Comment</Label>
                                  <Control.textarea model=".body" id="body" name="body" rows="6" className="form-control"/>
                              </Grid>
                              <Grid md={12}>
                                  <Button type="submit" color="primary">Submit</Button>
                              </Grid>
                         </LocalForm>

这就是我在material-ui中所做的

                       <form  noValidate autoComplete="off">
                          <TextField id="standard-basic" name="name" validators={{ minLength:minLength(3),maxLength:maxLength(15) }} label="Your name" />
                          <TextField id="standard-basic" name="email" label="email" />
                          <TextField id="standard-basic" name="body" label="comment" />
                           <Button type="submit" color="primary">Submit</Button>
                        </form>

这是沙盒中完整应用的链接 codeandbox.io/s/compassionate-night-5cdej

Answer 1

您的 MUI 表单上缺少 onSubmit={(values)=>this.handleComment(values)}