Question

我希望在用户输入时，将“监视资本主义”字符串逐个字母地输入到文本输入（或类似的输入）中。

代码工作到我试图将字母添加到输入的程度，此时我被告知“失败的道具类型：您为value表单字段提供了onChange道具}处理程序”。这种方法可行吗？如果不是，什么是替代品？

HTML：

<input
  id="search-bar"
  type="text"
  onKeyPress={this.handleKeyPress}
/>

JS：

//Dictates what is typed in the search bar
    (https://stackoverflow.com/questions/27827234/how-to-handle-the-onkeypress-event-in-reactjs)
  handleKeyPress = event => {
    var firstSearchString = "Surveillance Capitalism";
    //Converts firstSearchString into an array of its members (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
    var searchStringArray = Array.from(firstSearchString);
    //Gets contents of search bar
    var searchBar = document.getElementById("search-bar").value;
    //Length of that content
    var i = searchBar.length;
    searchBar.value += searchStringArray[i];
  };

基本上，我想诱使用户以为他们可以搜索所需的内容，但是当他们键入内容时，我的预设查询将一个字母一个字母地输入。

Answer 1

问题是您正在为搜索栏分配一个变量：

var searchBar = document.getElementById("search-bar").value;

然后更改变量，以解决您的问题，我只是这样做了：

handleKeyPress = event => {
        var firstSearchString = "Surveillance Capitalism";
        var searchStringArray = Array.from(firstSearchString);
        for(let i = 0; i < searchStringArray.length; i++) {
            document.getElementById("search-bar").value += searchStringArray[i];
        }
  };

我认为这就是您遇到的麻烦，但是我不确定我是否理解这个问题。希望对您有帮助

Answer 2

尝试使用onChange事件处理程序，而不是onKeyPress处理程序。那应该消除您的错误。它们在功能上稍有不同，但是应该完成相同的事情。

在onKeyPress react.js的文本输入中添加文本

2 个答案: