I know this question has been asked before, but I've tried all of solutions I could find, and after wasting days on this, I'm literally about cry. What am I doing wrong?

The input field remains readonly and onChange won't fire despite my varied and increasingly desperate attempts to coax it into behaving like the most basic of text input fields.

here's my code:

import React, { Component, PropTypes } from '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: I just realized that it does work as expected as long as I add <Contact /> to a ponent that doesn't invoke ponentDidMount(). It would be super helpful if someone could give a breakdown of why that would make input fields readonly, i.e. does invoking ponentDidMount() somehow interfere with onChangeor setState?

EDIT 2: ponentDidMount() only appeared to be the issue because the ponents where I invoked it were the ones that contained transitions/animations which I'd attempted to layer using z-index. It turns out that a negative z-index on a parent div can disable an input field by preventing you from being able to click into the text field, even if the input appears pletely unobscured.

I know this question has been asked before, but I've tried all of solutions I could find, and after wasting days on this, I'm literally about cry. What am I doing wrong?

The input field remains readonly and onChange won't fire despite my varied and increasingly desperate attempts to coax it into behaving like the most basic of text input fields.

here's my code:

import React, { Component, PropTypes } from '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: I just realized that it does work as expected as long as I add <Contact /> to a ponent that doesn't invoke ponentDidMount(). It would be super helpful if someone could give a breakdown of why that would make input fields readonly, i.e. does invoking ponentDidMount() somehow interfere with onChangeor setState?

EDIT 2: ponentDidMount() only appeared to be the issue because the ponents where I invoked it were the ones that contained transitions/animations which I'd attempted to layer using z-index. It turns out that a negative z-index on a parent div can disable an input field by preventing you from being able to click into the text field, even if the input appears pletely unobscured.

• javascript
• reactjs
• meteor-react

• 1 It works like a charm for me. Are there any errors in the console? – martriay Commented Aug 24, 2016 at 2:31
• it looks ok in my device. i think you need to check console. – Rafi Ud Daula Refat Commented Aug 24, 2016 at 2:37
• I'm not getting any errors in the console D,: I just realized that it works if I call <Contact /> from a module that doesn't have ponentDidMount(). Does that somehow force input fields to be readonly? – caitbun Commented Aug 24, 2016 at 3:00
• The input is a controlled ponent. Its value is changed by handleChange's setState call. – vijayst Commented Aug 24, 2016 at 3:04
• 1 aarghghghghhhaheiajfeioejeai;eij!!! frak me gently with a chainsaw. it was a z-index thing. i hadn't even considered that the z-index of a parent div could do that to a form input. i'll update my question in case anyone else is losing sanity over the same issue. thank you everyone for taking time to help me with this. without your input, i'd still be searching for the error in all the wrong places. – caitbun Commented Aug 25, 2016 at 1:36

2 Answers 2

To, fixed this you need to replace value as defaultValue so that you can change the value property of input field

import React, { Component, PropTypes } from 'react';

export default class Contact extends Component {

constructor(props) {
    super(props);
    this.state = { name: '' };
    }

handleChange(e) {
 console.log(e.target.value); // make sure you are receiving the 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>
    );
  }
}

The z-index of parent divs can make input fields appear readonly by making it impossible for you to click into the field. This can happen even if the field appears pletely unobscured. http://jsfiddle/t8542vcy/2/

In my code, a very distant parent div had a negative z-index, causing the input to silent fail. It functioned normally once I adjusted the z-index. http://jsfiddle/t8542vcy/5/

I had no idea that z-index could cause this and wasted SO much time writing and rewriting my code because I incorrectly thought it was a React issue. I shed literal tears and nearly lost the last shreds of my sanity. I can only hope that this helps someone tormented by a similar demon.

Check your z-index, folks, check your z-index.