React material UI reset values

Question

I'm using material UI with react.

I can't seem to be able to reset a form on submit without getting errors in the console.

If I have: <TextField defaultValue={myComment.title} refs="title" />

On Submit, if I do this: this.refs.title.setValue('') I get the following error in the console

Warning: setValue() method is deprecated. Use the defaultValue property instead. Or use the TextField as a controlled component with the value property.

So I tried to do: this.refs.title.defaultValue = '' but that didn't work.

I'm thinking I have to do a handleChange event? But seems very painful to set this up when all I want to do is clear the input field.

Thanks in advance for you help.

Answer 1

You can simply use getInputNode().value=""

So in you case it will be this.refs.title.getInputNode().value=""

Answer 2

I just had this question and I see you can just write:

type="reset"

https://jsfiddle.net/hfcrsqy2/

Answer 3

Try this for resetting your TextField and Props and States:

reset = ()=> {
       var  m = "";
       document.getElementById('h1').value = m;
}

It will only reset your textField, and if you want to reset State or Props too then just add setState() method in it.

reset = ()=> {
           setState({
               firtName: '',
               lastName: ''
             })
 }