無法在React應用中編輯輸入

我在編輯React應用中的值時遇到問題。我知道受控組件是如何工作的，而我的問題與此無關。無法在React應用中編輯輸入

我可以將文本粘貼到其中並查看輸入更改的狀態，但是當我嘗試自己更改時沒有任何反應。輸入位於TableHeader組件的內部。

import React from "react"; 
import classNames from "classnames"; 

class TableHeader extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
     columnFilterText : "", 
     filterBoxOpen : false 
    } 
    this.toggleSortBox = this.toggleSortBox.bind(this); 
    this.handleColumnInputChange = this.handleColumnInputChange.bind(this); 
} 

toggleSortBox(event, value) { 
    if(event.target === event.currentTarget) { 
     this.setState({ 
      filterBoxOpen: !this.state.filterBoxOpen 
     }); 
    } 
} 

handleColumnInputChange(event) { 
    console.log(event) 
    this.setState({ 
     columnFilterText: event.target.value 
    }) 
} 

render() { 
    let tableHeaderClasses = classNames({ 
    "sortable" : true, 
    "filter-box-open" : this.state.filterBoxOpen 
    }); 
    let sortOptionClasses = classNames({ 
    "sort-option" : true 

    }); 
    return (
     <th className={tableHeaderClasses} onClick={this.toggleSortBox}> 
      <div className="sort-box"> 
       <div className="sort-option-container"> 
        <div className={sortOptionClasses}>Sort - ascending</div> 
       </div> 
       <div className="sort-option-container"> 
        <div className={sortOptionClasses}>Sort - descending</div> 
       </div> 
       <hr className="divider" /> 
       <input onChange={this.handleColumnInputChange} type="text" value={this.state.columnFilterText} /> 
       <div className="row"> 
        <button className="six columns">Apply</button> 
        <button className="six columns">Clear</button> 
       </div> 
      </div> 
      {this.props.label} 
     </th> 
    ); 
} 
} 

export default TableHeader;

我檢查過，如果這是一個CSS問題，通過禁用樣式，但輸入字段仍然禁用，所以沒有運氣那裏。任何想法可能會導致這個問題？

來源

2017-05-31 Qeshmer

我一直無法在本地重現您的問題，您的所有代碼似乎都是正確的。你可以發佈一個codepen或許在問題發生的地方？ –

我可以通過鍵入和複製輸入元素的值來改變。它似乎在工作，但也許你可能在使用這個組件的頁面上有問題。 –

在'handleColumnInputChange'方法內部移除'console.log（event）'。 –

我是個白癡。原因是我在父組件上有一個鍵盤導航的keyDown事件，其中event.preventDefault();當然影響了子組件。

感謝大家的貢獻和幫助！

來源

2017-06-01 14:18:29 Qeshmer

無法在React應用中編輯輸入

回答

相關問題