Note

by Paweł Niemczyk

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://rawgit.com/nathanmarks/3f5196f5973e3ff7807f2bab4e603a37/raw/f409f3bf5902c211b358a3ebe7b6cd366da551e8/mui-umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Babel + JSX

const { RaisedButton, MuiThemeProvider, getMuiTheme, Slider, DatePicker } = MaterialUI;

 class ChangeDate extends React.Component {
	constructor(props, context) {
    super(props, context);
    
    this.state = {
      disabled: true
  	}
    this.onClick = this.onClick.bind(this);
  }
  

	onClick(event) {
  	console.log(!this.state.disabled)
  	this.setState({
    	disabled: !this.state.disabled
    })
  }

  render() {
    return (
      <div style={{width: '50%', margin: '0 auto'}}>
        <DatePicker hintText="Date" disabled={this.state.disabled} underlineStyle={{borderBottomColor: 'black'}} />
        <RaisedButton label={this.state.disabled ? 'Enable' : 'Disable'} onClick={this.onClick} />
      </div>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <ChangeDate />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('app')
);