Question

179

React material UI reset values

rated 0 times [ 183] [ 4] / answers: 1 / hits: 23830 / 8 Years ago, tue, february 2, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 8 Years ago raveno · Accepted Answer

So, the best way to use this component that can help you to achieve easily what you need (even if its a bit verbose) would be passing an value and onChange properties to the TextField...
You may handle the value on the state from your current component or even pass from parent's components as props..

A simple example:

handleInputChange(event) {

    this.setState({

        name: event.target.value

    })

}





cleanInput() {

    this.setState({

        name: ''

    })

}



<TextField value={this.state.name} onChange={this.handleInputChange.bind(this)} />