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

1 个答案: