How get data from material-ui TextField DropDownMenu components

Question

I create form  I have several TextField  DropDownMenu material-ui components included  question is how I can collect all data from all TextFields  DropDownMenus in one obj and sent it on server  For TextField it has TextField getValue   Returns the value of the input  But I can t understand how to use it    var React   require  react        mui   require  material-ui        Paper   mui Paper      Toolbar   mui Toolbar      ToolbarGroup   mui ToolbarGroup      DropDownMenu   mui DropDownMenu      TextField   mui TextField      FlatButton   mui FlatButton      Snackbar   mui Snackbar   var menuItemsIwant         payload   1   text    Select a finacial purpose          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsIcan         payload   1   text    Select an objective          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsHousing         payload   1   text    Select housing          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsIlive         payload   1   text    Select family mambers          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsLifestyle         payload   1   text    Select lifestyle          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsLifestyle2         payload   1   text    Select savings          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var menuItemsIncome         payload   1   text    Select your yearly income          payload   2   text   Every Night         payload   3   text   Weeknights         payload   4   text   Weekends         payload   5   text   Weekly       var Content   React createClass      getInitialState  function         return           formData              name                age                city                state                      errorTextName            errorTextAge            errorTextCity            errorTextState                    render  function          return          lt div className  container-fluid  gt           lt div className  row color-bg  gt  lt  div gt           lt div className  row main-bg  gt             lt div className  container  gt               lt div className  mui-app-content-canvas page-with-nav  gt                 lt div className  page-with-nav-content  gt                    lt Paper zDepth  1  gt                      lt h2 className  title-h2  gt Now  what would you like to do  lt  h2 gt                      lt Toolbar gt                       lt ToolbarGroup key  1  float  right  gt                         lt span gt I want to lt  span gt                         lt DropDownMenu                         className  dropdown-long                          menuItems  menuItemsIwant                            autoWidth  false                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  2  float  right  gt                         lt span gt So I can lt  span gt                         lt DropDownMenu                         className  dropdown-long                          menuItems  menuItemsIcan                            autoWidth  false                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt h2 className  title-h2  gt Please  share a little about you  lt  h2 gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  3  float  right  gt                         lt span gt I am lt  span gt                         lt TextField                         id  name                          className  text-field-long                          ref  textfield                          hintText  Full name                          errorText  this state errorTextName                          onChange  this  handleErrorInputChange                          gt                         lt span gt and I am lt  span gt                         lt TextField                         id  age                          className  text-field-short                          ref  textfield                          hintText  00                          errorText  this state errorTextAge                          onChange  this  handleErrorInputChange                          gt                         lt span className  span-right-measure  gt years of age  lt  span gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  4  float  right  gt                         lt span gt I lt  span gt                         lt DropDownMenu                         hintText  I                          menuItems  menuItemsHousing                            autoWidth  false                          gt                         lt span gt in lt  span gt                         lt TextField                         id  city                          ref  textfield                          className  text-field-long                          hintText  City                          errorText  this state errorTextCity                          onChange  this  handleErrorInputChange                          gt                         lt span gt   lt  span gt                         lt TextField                         id  state                          ref  textfield                          className  text-field-short text-field-right-measure                          hintText  ST                          errorText  this state errorTextState                          onChange  this  handleErrorInputChange                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  5  float  right  gt                         lt span gt Where I live lt  span gt                         lt DropDownMenu                         className  dropdown-long                          menuItems  menuItemsIlive                            autoWidth  false                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  6  float  right  gt                         lt span gt My lifestyle is lt  span gt                         lt DropDownMenu                         className  dropdown-short                          menuItems  menuItemsLifestyle                            autoWidth  false                          gt                         lt span gt and I ve saved lt  span gt                         lt DropDownMenu                         className  dropdown-short                          menuItems  menuItemsLifestyle2                            autoWidth  false                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt Toolbar gt                       lt ToolbarGroup key  7  float  right  gt                         lt span gt My yearly household is about lt  span gt                         lt DropDownMenu                         className  dropdown-mobile                          menuItems  menuItemsIncome                            autoWidth  false                          gt                       lt  ToolbarGroup gt                     lt  Toolbar gt                      lt div className  clearfix  gt  lt  div gt                      lt div className  button-place  gt                       lt FlatButton                       onTouchTap  this  handleClick                        label  I m done lets go                         gt                        lt Snackbar                       ref  snackbar                        message  Invalid input  please check and try again                        gt                     lt  div gt                    lt  Paper gt                  lt  div gt               lt  div gt             lt  div gt           lt  div gt         lt  div gt                  handleErrorInputChange  function e        if  e target id      name           var name   e target value        this setState             name  name          errorTextName  e target value         Please  type your Name                  else if  e target id      age           var age   e target value        this setState             age  age          errorTextAge  e target value         Check Age                  else if  e target id      city           var city   e target value        this setState             city  city          errorTextCity  e target value         Type City                  else if  e target id      state           var state   e target value        this setState             state  state          errorTextState  e target value         Type State                           handleClick  function e        this refs snackbar show          TODO  find a way to change errorText for all empty TextField     if  this refs textfield  amp  amp  this refs textfield getValue   length     0          this setState           errorTextState   Type State           errorTextCity   Type City           errorTextAge   Check Age           errorTextName   Please  type your Name                            module exports   Content    I want sent it on server in  handleClick method

User · Answer

Here all solutions are based on Class Component, but i guess most of the people who learned React recently (like me), at this time using functional Component. So here is the solution based on functional component.

Using useRef hooks of ReactJs and inputRef property of TextField.

    import React, { useRef, Component } from 'react'
    import { TextField, Button } from '@material-ui/core'
    import SendIcon from '@material-ui/icons/Send'

    export default function MultilineTextFields() {
    const valueRef = useRef('') //creating a refernce for TextField Component

    const sendValue = () => {
        return console.log(valueRef.current.value) //on clicking button accesing current value of TextField and outputing it to console 
    }

    return (
        <form noValidate autoComplete='off'>
        <div>
            <TextField
            id='outlined-textarea'
            label='Content'
            placeholder='Write your thoughts'
            multiline
            variant='outlined'
            rows={20}
            inputRef={valueRef}   //connecting inputRef property of TextField to the valueRef
            />
            <Button
            variant='contained'
            color='primary'
            size='small'
            endIcon={<SendIcon />}
            onClick={sendValue}
            >
            Send
            </Button>
        </div>
        </form>
    )
    }

User · Answer

The strategy of the accepted answer is correct  but here s a generalized example that works with the current version of React and Material-UI    The flow of data should be one-way    the initialState is initialized in the constructor of the MyForm control the TextAreas are populated from this initial state changes to the TextAreas are propagated to the state via the handleChange callback  the state is accessed from the onClick callback---right now it just writes to the console   If you want to add validation it could go there    import   as React from  react   import TextField from  material-ui TextField   import RaisedButton from  material-ui RaisedButton    const initialState         error  null     you could put error messages here if you wanted     person            firstname              lastname               export class MyForm extends React Component        constructor props            super props           this state   initialState             make sure the  this  variable keeps its scope         this handleChange   this handleChange bind this           this onClick   this onClick bind this              render             return                lt div gt                   lt div gt  this state error  lt  div gt                   lt div gt                       lt TextField                         name  firstname                          value  this state person firstname                          floatingLabelText  First Name                          onChange  this handleChange   gt                       lt TextField                         name  lastname                          value  this state person lastname                          floatingLabelText  Last Name                          onChange  this handleChange   gt                   lt  div gt                   lt div gt                       lt RaisedButton onClick  this onClick  label  Submit     gt                   lt  div gt               lt  div gt                        onClick             console log  when clicking  the form data is             console log this state person              handleChange event  newValue   void           event persist       allow native event access  see  https   facebook github io react docs events html             give react a function to set the state asynchronously             here it s using the  name  value set on the TextField            to set state person  firstname lastname                       this setState  state    gt  state person event target name    newValue               React render  lt MyForm   gt   document getElementById  app        Note  You may want to write one handleChange callback per MUI Component to eliminate that ugly event persist   call

User · Answer

flson s code did not work for me  For those in the similar situation  here is my slightly different code    lt TextField ref  myTextField   gt   get its value using   this refs myTextField input value

User · Answer

use the accepted answer   this was the answer to another  already deleted  question   karopastal  add a ref attribute to your  lt TextField   gt  component and call getValue   on it  like this   Component    lt TextField ref  myField    gt    Using getValue   this refs myField getValue

User · Answer

Faced to this issue after a long time since question asked here  when checking material-ui code I found it s now accessible through inputRef property        lt CssTextField   inputRef   c    gt   this myRefs username   c     label  Username    placeholder  xxxxxxx    margin  normal    className  classes textField    variant  outlined    fullWidth   gt        Then Access value like this     onSaveUser        gt        console log  Saving user        console log this myRefs username value

User · Answer

Add an onChange handler to each of your TextField and DropDownMenu elements  When it is called  save the new value of these inputs in the state of your Content component  In render  retrieve these values from state and pass them as the value prop  See Controlled Components     var Content   React createClass        getInitialState  function             return               textFieldValue                             handleTextFieldChange  function e            this setState               textFieldValue  e target value                         render  function             return                lt div gt                   lt TextField value  this state textFieldValue  onChange  this  handleTextFieldChange    gt               lt  div gt                         Now all you have to do in your  handleClick method is retrieve the values of all your inputs from this state and send them to the server   You can also use the React addons LinkedStateMixin to make this process easier  See Two-Way Binding Helpers  The previous code becomes   var Content   React createClass        mixins   React addons LinkedStateMixin        getInitialState  function             return               textFieldValue                            render  function             return                lt div gt                   lt TextField valueLink  this linkState  textFieldValue      gt               lt  div gt

User · Answer

class Content extends React Component       render             return                lt TextField ref   input    gt  this input   input    gt                         doSomethingWithData             let inputValue    this input getValue

User · Answer

In 2020 for TextField  via functional components  const Content        gt                  const textFieldRef   useRef           const readTextFieldValue        gt            console log textFieldRef current value                          return                     lt TextField         id  quot myTextField quot          label  quot Text Field quot          variant  quot outlined quot          inputRef  textFieldRef           gt                         Note that this isn t complete code

User · Answer

I don t know about y all but for my own lazy purposes I just got the text fields from  document  by ID and set the values as parameters to my back-end JS function    x000D   x000D    index js x000D   x000D         lt TextField x000D          id  field1  x000D              x000D          gt  x000D   x000D         lt TextField x000D          id  field2  x000D              x000D          gt  x000D   x000D         lt Button x000D            x000D        onClick       gt    printIt document getElementById  field1   value  x000D        document getElementById  field2   value      x000D           gt  x000D   x000D   x000D    printIt js x000D   x000D  export function printIt text1  text2    x000D  console log  on button clicked    x000D  alert text1   x000D  alert text2   x000D     x000D   x000D   x000D    It works just fine

User · Answer

Here s the simplest solution i came up with  we get the value of the input created by material-ui textField          create e            e preventDefault            let name   this refs name input value          alert name                  constructor            super            this create   this create bind this                  render             return                  lt form gt                   lt TextField ref  name  hintText    floatingLabelText  Your name    gt  lt br  gt                   lt RaisedButton label  Create  onClick  this create  primary  true    gt                 lt  form gt               hope this helps

[javascript] How get data from material-ui TextField, DropDownMenu components?

Examples related to javascript

Examples related to reactjs

Examples related to material-design

Examples related to material-ui