javascript - ReactJS OnKeyUp 事件未在受控输入上获得价值

Question

我正在构建一个 ReactJS 搜索组件，用于通过搜索过滤数据。

这个想法是用户输入一个单词，一个字母一个字母，系统将过滤所有包含该单词的寄存器。基本组件详述如下：

class SearchInput extends Component {
    static propTypes = {
        onKeyUp: PropTypes.func,
        placeHolder: PropTypes.string,
        value: PropTypes.string
    };

state = {
    searchText: ""
};

handleKeyUp = event => {

    console.log(event.target.value) // <== No result. Always empty

    let newSearchText = event.target.value;
    this.setState({ searchText: newSearchText });
    if (this.props.onKeyUp) this.props.onKeyUp(newSearchText);
};

render() {
    console.log(this.state.searchText) // <== Always empty

    return (
        <div className="search-input">
            <div className="search-input-icon">
                <Icon name="faSearch" />
            </div>
            <input
                autoFocus="true" 
                type="text"
                onKeyUp={this.handleKeyUp}
                placeholder={this.props.placeHolder}
                value={this.state.searchText}
            />
        </div>
    );
}

handleKeyUp我没有在事件处理程序上获得按键值。

如果我value={this.state.searchText}从代码中省略（不受控制的）它会起作用，但我需要一种searchText从组件外部设置的方法（初始化、其他组件选择等）。

为什么我没有event.target.value在我的处理程序上获取数据？如何解决？

Answer 1

尝试event.key改用。

event.target.value只是指向您this.state.searchText尚未设置的。

Answer 2

用这个：

let newSearchText = event.target.getAttribute('value')

Answer 3

似乎您忘记在构造函数上绑定函数：

class SearchInput extends Component {
  constructor(props) {
    super(props);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  //... any code here

  handleKeyUp = event => {
    console.log(event.target.value);
  }

  render() {
    //... any code here

    <input
      autoFocus="true" 
      type="text"
      onKeyUp={this.handleKeyUp}
      placeholder={this.props.placeHolder}
      value={this.state.searchText}
    />
  }
}

Answer 4

我很确定您必须onChange在输入字段上收听事件才能获得更新的目标值。简单地改变

<input onKeyUp={this.handleKeyUp} />

至

<input onChange={this.handleKeyUp} />