ReactJS, material-ui TextField onChange not working

user_2997866 0
Viewed 24354

I am using Material-UI (version v0.20.1) with ReactJS (version 15.5). This code is expected to work, but it doesn't. I always used the TextField in the same way, but here in the new component, I can't type anything in the input and the onChange() is not firing. What would be a possible reason? even a 'console.log' in onChange() does not show up!!!

import TextField from 'material-ui/TextField';

class Nav extends Component {

 constructor() {
   super();
     this.state = {
      searchValue: '',
     }...

I am using the TextField like always:

<TextField
  value={this.state.searchValue}
  onChange={(event, value) => {
  this.setState({ searchValue: value });
}}
/>
material-ui reactjs
1 Answers

You can try something like this:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      searchValue: ""
    };
  }
  render() {
    console.log(this.state.searchValue); // I just left it here so that you can see in console that state is changing
    return (
      <TextField
        defaultValue={this.state.searchValue}
        onChange={event => {
          const { value } = event.target;
          this.setState({ searchValue: value });
        }}
      />
    );
  }
}
user_58338160
Related