无法在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应用中编辑输入

回答

相关问题