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

后端 未结 10 1911
遥遥无期
遥遥无期 2021-01-31 01:13

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 s

相关标签:
10条回答
  • 2021-01-31 01:53

    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:

    //index.js
    
          <TextField
            id="field1"
            ...
          />
    
          <TextField
            id="field2"
            ...
          />
    
          <Button
          ...
          onClick={() => { printIt(document.getElementById('field1').value,
          document.getElementById('field2').value)    
          }}>
    
    
    //printIt.js
    
    export function printIt(text1, text2) {
    console.log('on button clicked');
    alert(text1);
    alert(text2);
    };

    It works just fine.

    0 讨论(0)
  • 2021-01-31 02:00

    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>
        )
        }
    
    0 讨论(0)
  • 2021-01-31 02:03

    use the accepted answer / this was the answer to another (already deleted) question

    @karopastal

    add a ref attribute to your <TextField /> component and call getValue() on it, like this:

    Component:

    <TextField ref="myField" />
    

    Using getValue:

    this.refs.myField.getValue()
    
    0 讨论(0)
  • 2021-01-31 02:04

    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.

    ...
    <CssTextField
      inputRef={(c) => {this.myRefs.username = c}}
      label="Username"
      placeholder="xxxxxxx"
      margin="normal"
      className={classes.textField}
      variant="outlined"
      fullWidth
    />
    ...
    

    Then Access value like this.

      onSaveUser = () => {
        console.log('Saving user');
        console.log(this.myRefs.username.value);
      }
    
    0 讨论(0)
提交回复
热议问题