4

我知道以前有人问过这个问题，但我已经尝试了所有我能找到的解决方案，在浪费了几天时间之后，我真的要哭了。我究竟做错了什么？

尽管我越来越多地尝试诱使输入字段表现得像最基本的文本输入字段，但输入字段仍然存在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()以某种方式干扰onChangeor setState？

编辑 2：componentDidMount()似乎只是问题，因为我调用它的组件是包含我试图使用 z-index 分层的过渡/动画的组件。事实证明，父 div 上的负 z-index 可以通过阻止您单击文本字段来禁用输入字段，即使输入看起来完全没有遮挡也是如此。

4

2 回答 2

8

要，修复此您需要替换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>
    );
  }
}
于 2016-08-24T05:26:48.263 回答
4

z-index父 div 可以通过使您无法单击输入字段来显示输入字段readonly。即使该字段看起来完全没有遮挡，也会发生这种情况。http://jsfiddle.net/t8542vcy/2/

在我的代码中，一个非常遥远的父 div 的 z-index 为负，导致输入静默失败。一旦我调整了http://jsfiddle.net/t8542vcy/5/，它就可以正常运行z-index.

我不知道这z-index会导致这种情况，并且浪费了很多时间来编写和重写我的代码，因为我错误地认为这是一个 React 问题。我流下了真正的眼泪，几乎失去了最后一丝理智。我只能希望这可以帮助被类似恶魔折磨的人。

检查你的z-index，伙计们，检查你的z-index。

于 2016-08-25T03:55:24.967 回答