ReactJS - How can I set a value for textfield from material-ui?

Question

I have a selectField and I want to set a value on it. Let say I type on it and when I click a button, the button will call a function that will reset the value of the textfield?

<TextField hintText="Enter Name" floatingLabelText="Client Name" autoWidth={1} ref='name'/> 

Answer 1

You can do it in this way

export default class MyCustomeField extends React.Component {        constructor(props) {         super(props);          this.state = {           value: 'Enter text',         };       }        handleChange = (event) => {         this.setState({           value: event.target.value,         });       };       handleClick = () => {         this.setState({           value:'',         });       };        render() {         return (           <div>             <TextField               value={this.state.value}               onChange={this.handleChange}             />             <button onClick={this.handleClick}>Reset Text</button>           </div>         );       }     } 

Answer 2

It's maintained that the right way is to have the component be controlled in a scenario like the accepted answer there, but you can also control the value in this gross and culturally unacceptable way.

<TextField ref='name'/>  this.refs.name.getInputNode().value = 'some value, hooray' 

and you can of course retrieve the value like so

this.refs.name.getValue()