MDB Inputs seem to be read only when assiging a value to the


Topic: MDB Inputs seem to be read only when assiging a value to them

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: 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
Tags