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

React - 即使我已添加onChange，为什么输入字段仍然只读（即不可编辑）？

2 个答案: