How to get input value of TextField from Material UI?

Question

So, before using material UI, my code was like this. To implement edit feature for ToDo app I used ref from textarea for get current (default) value in there, and then save updated value in save () method (don't worry about editItem method, it is in another component, and I believe there is no need to post him, because the problem is not there)

import React, {Component} from 'react';
import './ToDoItem.css';
import EditButton from './EditButton';
import DeleteButton from './DeleteButton';
import SaveButton from './SaveButton';
import EditToDoField from './EditToDoField';

class ToDoItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editMode: false,
        }
      };

      edit = () => {
        this.setState ({editMode: true});
      };

      save = () => {
        let updToDo = this.refs.newToDo.value;
        this.props.editItem (updToDo);

        this.setState ({
          editMode: false})
      };

      renderNormal = () => {
        return (
            <div className="ToDoItem">
            <p className="ToDoItem-Text">{this.props.todo}</p>
            <EditButton editHandler={this.edit} />
        </div>
        );
      };

      renderEdit = () => {
        return (
          <div className="ToDoItem">
            <textarea ref="newToDo" defaultValue={this.props.todo}></textarea>
            <SaveButton saveHandler={this.save} /> 
          </div>
        );
      };

      render() {
        if (this.state.editMode) {
          return this.renderEdit ();
        } else {
          return this.renderNormal ();
        }
      }
}

export default ToDoItem;

So, now I trying to implement beautiful TextField from material UI, texarea tag was deleted and here is the respective additions to code:

<EditToDoField 
                ref="newToDo"
                defaultToDoValue={this.props.todo} 
            />

and EditToDoField component:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: "61px",
  },
});

class OutlinedTextFields extends React.Component {

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OutlinedTextFields);

So I pass current (default) value to EditToDoField, but when I'm trying to save updated ToDo text, I got empty field in result. I understand that most probably I just missed something, but still don't get what. I also tried to use "innerRef" and "inputRef" instead of "ref", but no luck. Can you please help me with this stuff ?

Input works, values from console.log appears as it should, but I still have empty field after saving edited input ... — Wonderio619
– Wonderio619, Commented Sep 29, 2018 at 18:59
It seems to work, according to console, but I still don't understand how to implement it inside my exact code. I must continue after some sleep ... — Wonderio619
– Wonderio619, Commented Sep 29, 2018 at 19:50

Paul McLoughlin · Accepted Answer · 2018-09-29 19:17:01Z

2

Add a simple event handler when the user enters text, you can then use a callback to move the input from the text field to whatever component you want, here's the full example

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap'
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: '61px'
  }
});

class OutlinedTextFields extends React.Component {
  handleOnChange = event => {
    console.log('Click');
    console.log(event.target.value);
  };

  render() {
    const { classes } = this.props;

    return (
      <form className={classes.container} noValidate autoComplete="off">
        <TextField
          id="outlined-editToDO"
          label="Edit ToDo"
          defaultValue={this.props.defaultToDoValue}
          className={classes.textField}
          multiline
          margin="normal"
          variant="outlined"
          onChange={this.handleOnChange}
        />
      </form>
    );
  }
}

OutlinedTextFields.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(OutlinedTextFields);

edited Sep 29, 2018 at 19:17

answered Sep 29, 2018 at 18:27

Paul McLoughlin

2,2892 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Wonderio619 Over a year ago

Hm, I also can simply get the value by using inputRef: <TextField inputRef={el => this.ToDoRef = el} /> handleOnChange = event => { console.log(this.ToDoRef.value); }; Just need to send this value to my save () method in ToDoItem component ...

Paul McLoughlin Over a year ago

You don't need to use references.

Wonderio619 Over a year ago

Paul, thank you, I finally got your point, everything works now ! Well, almost everything. I still got a problem. If I hit edit button and don't change the input text, and then hit save button, then I got empty field as a result. So I need to actually change the field, if I tried to save the same input, I got empty field. How to solve this "bug" ? And take a look at my updated code please: codesandbox.io/s/01w2v171vn

Wonderio619 Over a year ago

I believe I solved it, check codesandbox. And cat you please explain what event.preventDefault(); function do ?

Wonderio619 Over a year ago

Ok, but my button is from material UI, not default one from HTML, so I can delete this function. Thank you once again )

|

Collectives™ on Stack Overflow

How to get input value of TextField from Material UI?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related