javascript - React - Why is input field still readonly (i.e. not editable) even though I've added onChange? -

i know question has been asked before, i've tried of solutions find, , after wasting days on this, i'm literally cry. doing wrong?

the input field remains readonly , onchange won't fire despite varied , increasingly desperate attempts coax behaving basic of text input fields.

here's code:

import react, { component, proptypes } 'react';  export default class contact extends component {      constructor(props) {         super(props);         this.state = { name: '' };         }      handlechange(e) {         this.setstate ({ name: e.target.value });     }      render() {         return (           <div>               <form>                       <input                     type = "text"                     value = { this.state.name }                      onchange = { this.handlechange.bind(this) }                   />               </form>           </div>         );     }  } 

edit: realized work expected long add <contact /> component doesn't invoke componentdidmount(). super helpful if give breakdown of why make input fields readonly, i.e. invoking componentdidmount() somehow interfere onchangeor setstate?

edit 2: componentdidmount() appeared issue because components invoked ones contained transitions/animations i'd attempted layer using z-index. turns out negative z-index on parent div can disable input field preventing being able click text field, even if input appears unobscured.

to, fixed need replace value defaultvalue can change value property of input field

import react, { component, proptypes } 'react';  export default class contact extends component {  constructor(props) {     super(props);     this.state = { name: '' };     }  handlechange(e) {  console.log(e.target.value); // make sure receiving the value     this.setstate ({ name: e.target.value }); }  render() {     return (       <div>           <form>                   <input                 type = "text"                 defaultvalue = { this.state.name } // here write defaultvalue instead of value                 onchange = { this.handlechange.bind(this) }               />           </form>       </div>     );   } }