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？

回答

相關問題