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