MDBInputGroup

n.antokhov pro asked 5 years ago

How I can get a value from input from MDBInputGroup?


Christian Aichner pro answered 5 years ago

Hey!

Any input should have a value and onChange handler.

EDIT

It seems like the onChange handler does not work as intended. I have just tested my solution and there is no event happening.

So I replaced onChange with onKeyUp to test it.

import React from "react";
import { MDBInputGroup } from "mdbreact";

class App extends React.Component {
  // Set initial states
    state = {
        username: "",
    }

    // Handle the onChange event
    handleChange = (e) => {
        // Set the state dynamically using the event param
        this.setState({[e.target.name]: e.target.value})
    }

    render() {
        console.log(this.state);
        return (
            <MDBInputGroup
            containerClassName="flex-nowrap mb-3"
            prepend="@"
            name="username"
            onKeyUp={this.handleChange}
            value={this.state.username}
            hint="Username"
            />
        );
    }
}

export default App;

Testing this I found out, that the event passed is not the input field and delivers no value. I think this is a #bug.

Because accordingly to the API documentation of https://mdbootstrap.com/docs/react/forms/input-group/ the MDBInputGroup should have a onChange event.


Old answer

I imagine a solution should be:

import React from "react";
import { MDBInputGroup } from "mdbreact";

class App extends React.Component {
  // Set initial states
  state = {
      username: "",
  }

  // Handle the onChange event
  handleChange = (e) => {
      // Set the state dynamically using the event param
      this.setState({[e.target.name]: e.target.value})
  }

  render() {
    return (
      <MDBInputGroup
      containerClassName="flex-nowrap mb-3"
      prepend="@"
      name="username"
      onChange={this.handleChange}
      value={this.state.username}
      hint="Username"
      />
    );
  }
}

export default App;

This handleChange function dynamically sets the state for each input you might want. Just set the name and value accordingly.

I haven't tested this, but this should work fine.


n.antokhov pro commented 5 years ago

By this way we can receive input value:

handleChange = e => console.log(e.currentTarget.childNodes[{childInputIndex}].value);

And use element event onKeyUp={this.handleChange}


Christian Aichner pro commented 5 years ago

Ah that's great! Seems you solved it them :)

Just mark this issue as resolved then.

Best regards, Chris


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: Mac
  • Browser: Chrome
  • OS: iOS
  • Provided sample code: No
  • Provided link: No
Tags