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

Question

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

Answer 1

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

感谢大家的贡献和帮助！

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

Can't edit input in React app

javascript

state

input

reactjs