无法在 React 应用程序中编辑输入答案

【问题标题】：Can't edit input in React app无法在 React 应用程序中编辑输入
【发布时间】：2017-11-01 17:05:49
【问题描述】：

我在编辑我的 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 问题，但输入字段仍然被禁用，所以那里没有运气。有什么想法可能导致该问题吗？

【问题讨论】：

我无法在本地重现您的问题，您的所有代码似乎都是正确的。您可以在问题发生的地方发布一个代码笔吗？
我可以通过键入和复制输入元素的值来进行更改。看起来它正在工作，但您可能在使用此组件的页面中遇到问题。
删除 console.log(event) 内的 handleColumnInputChange 方法。
@MayankShukla 可能是问题所在，至少这是我观察到的无限循环的原因（由于堆栈 sn-ps 劫持控制台）
我之前也遇到过这个问题，不记得具体是怎么解决的了，但是最简单的解决方法是用defaultValue替换value属性

标签： javascript reactjs input state

【解决方案1】：

我是个白痴。原因是我在父组件上有一个 keyDown 事件用于键盘导航，event.preventDefault(); 当然影响了子组件。

感谢大家的贡献和帮助！

【讨论】：