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的方法。 / p>

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

Answer 1

使用此：

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

Answer 2

尝试改用event.key。

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

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} />

ReactJS OnKeyUp事件未在受控输入上获取值

4 个答案: