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

我知道这个问题之前已经被问过了，但我已经尝试了所有可以找到的解决方案，并且在浪费了几天的时间之后，我实际上就是在哭泣。我究竟做错了什么？React - 为什么输入字段仍然只读（即不可编辑），即使我已添加onChange？

输入字段仍然是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索引也可以禁止输入字段，因为您无法点击文本字段。

来源

2016-08-24 caitbun

它对我来说就像一个魅力。控制台中是否有错误？ – martriay

它在我的设备中看起来不错。我想你需要检查控制台。 –

我没有在控制台D中发现任何错误：我刚刚意识到，如果我从没有componentDidMount（）的模块中调用，它就会起作用。这是否会强制输入字段为只读？ – caitbun

为了固定这一点，你需要更换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-24 05:26:48

谢谢你的回应！即使defaultValue不是我的问题的根源，我知道这可能会帮助其他人！ :) – caitbun

家长的div可以的z-index输入字段通过使它不可能出现readonly你点击进入该字段。即使该字段完全没有显示，也会发生这种情况。 http://jsfiddle.net/t8542vcy/2/

在我的代码中，一个非常遥远的父div具有负z-索引，导致输入沉默失败。一旦我调整了z-index.http://jsfiddle.net/t8542vcy/5/

我根本不知道z-index可能导致这一点，浪费了那么多时间写作和重写我的代码，因为我错误地认为这是一个作出反应的问题是功能正常。我流下了眼泪，几乎失去了我的理智的最后碎片。我只能希望这能帮助那些受到类似恶魔折磨的人。

检查你的z-index，乡亲们，检查你的z-index。

来源

2016-08-25 03:55:24 caitbun

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

回答

相关问题