Topic: MDB Inputs seem to be read only when assiging a value to them
SSR free asked 5 years ago
Hi
When I set the value of an MDBInput, you then can't then change the value in the component in the browser. If I don't set the value then the input component works fine.
Example: If I set the value with 'checked=' then its like the component is read only and you can't change its value .
if I leave the 'checked' bit out, the component works fine.
Same with text inputs.
Any guidance?
Thanks,
Stuart
Jakub Chmura staff answered 5 years ago
Hi,
If you want to get or set the input value you need to write a method that will be changing the state. When you set value
or checked
without methods this inputs will be read-only.
I wrote for You a simple snippet with a default input value to show you what I mean:
import React, { Component } from 'react';
import { MDBCol, MDBInput, MDBBtn, MDBCard, MDBCardBody } from 'mdbreact';
class SimpleSnippet extends Component {
constructor() {
super();
this.state = {
name: 'TestName',
checkbox: false,
message: 'Test text area'
};
}
handleInput = e => {
console.log(e.target.value);
this.setState({
[e.target.name]: e.target.value
});
};
handleCheckbox = e => {
this.setState(
{
[e.target.name]: e.target.checked
},
() => {
console.log(this.state.checkbox);
}
);
};
render() {
return (
<MDBCol md='4'>
<MDBCard>
<MDBCardBody>
<form>
<p className='h4 text-center py-4'>Sign up</p>
<div className='grey-text'>
<MDBInput
label='Your name'
group
type='text'
validate
error='wrong'
success='right'
name='name'
value={this.state.name}
onInput={this.handleInput}
required
/>
<MDBInput
type='textarea'
rows='2'
label='Your message'
name='message'
value={this.state.message}
onInput={this.handleInput}
required
/>
<MDBInput
containerClass='form-check checkbox-teal'
labelClass='form-check-label'
label='Confirm '
type='checkbox'
id='Confirm'
name='checkbox'
checked={this.state.checkbox}
onChange={this.handleCheckbox}
required
/>
</div>
<div className='text-center py-4 mt-3'>
<MDBBtn color='cyan' type='submit'>
Send Message
</MDBBtn>
</div>
</form>
</MDBCardBody>
</MDBCard>
</MDBCol>
);
}
}
export default SimpleSnippet;
Best Regards, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.21.0
- Device: Mac Book
- Browser: All
- OS: Mojave
- Provided sample code: No
- Provided link: No