Question

创建 onKeyPress“Enter” ReactJS 时出错

2017-05-08

1768

javascript reactjs addeventlistener

我对 ReactJS 还很陌生，而且我对 React 的研究还不够深入，我想设置一个返回查询的搜索框，但是现在我得到了一个 Uncaught TypeError：无法读取未定义的属性“keyCode”

if(keyCode==='13')

我想做的是每次我在文本框上按“Enter”键时都会得到 console.log

这是我尝试做的

var searchQuery = (e) => {
    var textInput = document.getElementById('searchQuery');
        if(e.keyCode === '13'){
            console.log('Enter pressed');
        };  
    };

const SearchBar = () => {
    debugger;

  return (
    <div className="search-bar">
        <input type="text" id="searchQuery" placeholder="Enter Query" onKeyPress={searchQuery(event)}/>
    </div>
    );

};

任何帮助都将不胜感激。

Answer 1

您需要使用

var keyCode = e.which || e.keyCode;
        if(keyCode === 13){
            console.log('Enter pressed');
        };  
    };

和

onKeyPress={searchQuery}

var searchQuery = (e) => {
    var textInput = document.getElementById('searchQuery');
    var keyCode = e.which || e.keyCode;
        if(keyCode === 13){
            console.log('Enter pressed');
        };  
    };

const SearchBar = () => {
    debugger;

  return (
    <div className="search-bar">
        <input type="text" id="searchQuery" placeholder="Enter Query" onKeyPress={searchQuery}/>
    </div>
    );

};

ReactDOM.render(
  <SearchBar/>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root">
</div>

Answer 2

我不太了解 React，但它应该就像

onKeyPress={searchQuery}

输入“函数名称”，不带参数。

dasiekjs

2017-05-08