react Trying to convert from bootstrap to Material UI

℡╲_俬逩灬. 提交于 2020-01-06 08:07:17

问题


I have a react app and I am trying to convert it from bootstrap to Matrial-UI but when I try to change the modal from bootstrap to material-ui the form does not work. I have not used material-ui before so I am a bit lost

This is my bootstrap

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

and this is what I have done in 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>

This is a link to the complete app in sandbox codesandbox.io/s/compassionate-night-5cdej

来源:https://stackoverflow.com/questions/59396937/react-trying-to-convert-from-bootstrap-to-material-ui

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!