React - 即使我添加了onChange，為什么輸入字段仍然只讀（即不可編輯）？

Question

我知道之前已經問過這個問題，但是我已經嘗試了所有可以找到的解決方案，並且在浪費了幾天之后，我真的會哭泣。 我究竟做錯了什么？

輸入字段保持readonly並且onChange不會觸發，盡管我的變化和越來越絕望的嘗試誘使它表現得像最基本的文本輸入字段。

這是我的代碼：

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>
        );
    }

}

編輯：我只是意識到它確實按預期工作，只要我將<Contact />添加到不調用componentDidMount() 。 如果有人可以分析為什么會使輸入字段只讀，即調用componentDidMount()以某種方式干擾onChange或setState這將是非常有用的？

編輯2： componentDidMount()似乎只是問題，因為我調用它的組件是那些包含我嘗試使用z-index進行分層的轉換/動畫的組件。 事實證明，父div上的負z-index可以通過阻止您單擊文本字段來禁用輸入字段， 即使輸入看起來完全沒有遮擋。

Answer 1

父div的z-index可以使輸入字段顯示為readonly ，因為您無法單擊該字段。 即使該字段看起來完全沒有遮擋，也可能發生這種情況。 http://jsfiddle.net/t8542vcy/2/

在我的代碼中，一個非常遠的父div有一個負的z-index，導致輸入無聲失敗。 一旦調整了z-index.它就能正常運行z-index. http://jsfiddle.net/t8542vcy/5/

我不知道z-index可能導致這種情況並且浪費了很多時間來編寫和重寫我的代碼，因為我錯誤地認為這是一個React問題。 我流下了眼淚，幾乎失去了理智的最后一絲。 我只能希望這可以幫助一個受到類似惡魔折磨的人。

檢查你的z-index ，伙計們，檢查你的z-index 。

Answer 2

要修復此問題，您需要將value替換為defaultValue以便您可以更改輸入字段的value屬性

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>
    );
  }
}