<div id="container"></div>

.container{
   span{
      margin-right: 40px;
      font-size: 16px;
      a{
         color: #fff;
         text-decoration: none;
      }
   }
}

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import {
   TextField
} from 'material-ui';



const Test = () => {

   const handlerOnChange = (event) => {
      switch (event.target.id) {
         case 'firstName':
            console.log('setFirstName',event.target.value);
            break;
         case 'lastName':
            console.log('setLastName',event.target.value);
            break;
         case 'dept':
            console.log('setDept',event.target.value);
            break;
         case 'login':
            console.log('setLogin',event.target.value);
            break;
      }
   };

   return (
      <div>
         <TextField
            id='firstName'
            error={false}
            helperText={''}
            onChange={handlerOnChange}
            margin='normal'
            label={'label firstName'}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
            />
         <TextField
            id='dept'
            error={false}
            helperText={''}
            onChange={handlerOnChange}
            margin='normal'
            label={'label dept'}
            inputProps={{ maxLength: 20 }}
            defaultValue=''
            />
      </div>
   );
}; 


ReactDOM.render(
   <Test />,
   document.getElementById('container')
);