Question

我是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

我不知道反应很好，但它应该就像

onKeyPress={searchQuery}

键入＆＃39;函数名称＆＃39;，不带参数。

Answer 2

您需要使用

var turn = true;

var enemyCards = document.getElementById('enemy-cards');

var friendlyCards = document.getElementById('friendly-cards');

var friendlyHealth = document.getElementById('friendly-health-value');

var enemyHealth = document.getElementById('enemy-health-value');

var goodHealth = 20;
var badHealth = 20;

var enemyCardArray = [
    [2, 3],
    [2, 4]
];

var friendlyCardArray = [
    [4, 3],
    [3, 2]
];

function initialSetup() {
    for (var i = 0; i < enemyCardArray.length; i++) {
        var card = enemyCardArray[i];
        var damage = card[0];
        var health = card[1];
        enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + " <
            /h1><h1 class='health'>"+health+"</h
        1 > < /div>"
    }

    for (var i = 0; i < friendlyCardArray.length; i++) {
        var card = friendlyCardArray[i];
        var damage = card[0];
        var health = card[1];
        friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + " <
            /h1><h1 class='health'>"+health+"</h
        1 > < /div>"
    }
}

function setup() {
    enemyCards.innerHTML = ""; //<--Set it to "" here, not in for loop
    friendlyCards.innerHTML = ""; //<--Set it to "" here, not in for loop
    for (var i = 0; i < enemyCardArray.length; i++) {
        var card = enemyCardArray[i];
        var damage = card[0];
        var health = card[1];
        //enemyCards.innerHTML = "";
        enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" +
            damage + "</h1><h1 class='health'>" + health + "</h1></div>";
    }

    for (var i = 0; i < friendlyCardArray.length; i++) {
        var card = friendlyCardArray[i];
        var damage = card[0];
        var health = card[1];
        //friendlyCards.innerHTML = "";
        friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" +
            damage + "</h1><h1 class='health'>" + health + "</h1></div>";
    }
}

function battle() {
    if (turn === true) {
        for (var i = 0; i < friendlyCardArray.length; i++) {
            if (friendlyCardArray.length == enemyCardArray.length) {
                enemyCardArray[i][1] -= friendlyCardArray[i][0];
                if (enemyCardArray[i][1] < 1) {
                    enemyCardArray.splice(i, 1);
                }
            }
            if (friendlyCardArray.length > enemyCardArray.length) {
                for (var i = 0; i < enemyCardArray.length; i++) {
                    enemyCardArray[i][1] -= friendlyCardArray[i][0];
                    if (enemyCardArray[i][1] < 1) {
                        enemyCardArray.splice(i, 1);
                    }
                }
                for (var i = enemyCardArray.length + 1; i > enemyCardArray.length; i++) {
                    badHealth -= friendlyCardArray[i][0];
                    if (i == frienlyCardArray.length + 1) {
                        break;
                    }
                }

            }
            if (friendlyCardArray.length < enemyCardArray.length) {
                for (var i = 0; i < friendlyCardArray.length; i++) {
                    enemyCardArray[i][1] -= friendlyCardArray[i][0];
                    if (enemyCardArray[i][1] < 1) {
                        enemyCardArray.splice(i, 1);
                    }
                }

            }
            if (turn === false) {

            }
        }
    }
}
initialSetup();
battle();
setup();

和

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')
);

创建onKeyPress时出错“输入”ReactJS

2 个答案: