Updating input value by setting state

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Updating input value by setting state

cmykprnt pro asked 7 years ago

Hello there, I bought this component to replace my Material-UI component with it but I'm having some difficulties using it. So for example when my user press Enter on a search Input, I want to clear that textbox by setting its related state value and it was working fine with my previous component, but I think it's not supported in MDB, right?! For example: const { name } = this.state.searchParams; return ( <Input    hint="Search Products..."    value={name}    size="sm"    icon="search"    onChange={this.handleTextChange}    onKeyPress={this.searchKeyPress} /> ) handleTextChange(e) { const { value } =e.target; constnewState= { ...this.state }; newState.searchParams.name =value; this.setState(newState); } I'd really appreciate it if you know any other ways around this problem. Thanks in advance.

Jakub Strebeyko staff answered 7 years ago

Hi there, To make sure I understand the request correctly - what you mean is a onKeyUp event that would be clearing the search query inside the <Input/> component? Best, Kuba

cmykprnt pro commented 6 years ago

Hi Jakub, I kind of solved my problem by a trick like the one you said, but I still have the main question. Why MDB React doesn't support Controlled Component on Inputs? It's always recommended to use Controlled Components in React vs Uncontrolled. Best

Jakub Strebeyko staff commented 6 years ago

Hello cmykprnt, Thanks for reaching out with this question! Although I would not agree that it is <em>always recommended</em> to go for Controlled Components, it is a fact that MDB React inputs should be controlled, and they are not, currently. We were discussing few edge-cases, in which internal state of the component could be useful, but we do start to realize the inputs is mostly used for forms creation, and as such should derive its value from props. We are working on that as we speak - the upcoming release will present the inputs as components fully controlled with props. With Best Regards, Kuba

Aram Muradyan commented 5 years ago

Hi,do you have any solution for < input > values, i can't take data from props, Reagrds,Aram.

Jakub Chmura staff premium commented 5 years ago

Hi, @Aram Muradyan

Please use component to control its value. But if you want to use a native you should control it by yourself. Here is a link to the documentation: https://mdbootstrap.com/docs/react/forms/inputs/#docsTabsAPI

Best, Kuba
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
cmykprnt
Pro User
10Support score
3Questions 2Answers
0Snippets likes 0Snippets