Javascript document.onkeypress在React中

我正在尝试构建一个网页，它可以监听任何按键并向服务器发送POST请求以获取一些数据。使用返回的数据，我想将其呈现到网页上

最初，为了获得按键，我有一个HTML文件，在标题中，我有一个脚本标记，看起来像这样：

<script type="text/javascript">
      document.onkeypress = function(evt) {
        evt = evt || window.event;
        var charCode = evt.keyCode || evt.which;
        var charStr = String.fromCharCode(charCode);
        console.log(charStr);

        var params = {
          key: charStr
        };

        var form = document.createElement("form");
        console.log(form);
        form.method = "post";
        form.action = "http://localhost:8888/";

        for (var key in params) {
          if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.type = "hidden";
            hiddenField.name = key;
            hiddenField.value = params[key];
            console.log(hiddenField);

            form.appendChild(hiddenField);
          }
        }

        document.body.appendChild(form);
        form.submit();
      };
    </script>

document.onkeypress=功能（evt）{
evt=evt | | window.event；
var charCode=evt.keyCode | | evt.which；
var charStr=String.fromCharCode（charCode）；
console.log（charStr）；
变量参数={
关键字：charStr
};
var form=document.createElement（“表单”）；
控制台日志（表格）；
form.method=“post”；
form.action=”http://localhost:8888/";
for（参数中的变量键）{
if（参数hasOwnProperty（键））{
var hiddenField=document.createElement（“输入”）；
hiddenField.type=“隐藏”；
hiddenField.name=key；
hiddenField.value=params[key]；
console.log（hiddenField）；
表格.appendChild（hiddenField）；
}
}
文件.正文.附件（表格）；
表单提交（）；
};

现在我使用React，因为我想监听任何按键，并在不刷新的情况下将返回的数据呈现到网页上。我有一个看起来像这样的组件

class myComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      x: null,
      y: null,
      z: null
    };
  }

  componentDidMount() {
    fetch("/some-endpoint")
      .then(res => res.json())
      .then(
        returnData => this.setState(returnData),
        () => console.log("State has been set to the return data")
      );
  }

  render() {
    return (
      <div>
        <h1>{this.state.x}</h1>
        <h2>{this.state.y}</h2>
        <h2>{this.state.z}</h2>
      </div>
    );
  }
}

类myComponent扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ x:null， y:空， z:空 }; } componentDidMount（）{ 获取（“/some endpoint”） .then（res=>res.json（）） .那么( returnData=>this.setState（returnData）， （）=>console.log（“状态已设置为返回数据”） ); } render（）{ 返回( {this.state.x} {this.state.y} {this.state.z} ); } } 我想做的基本上是让我在上面的HTML代码段中运行的脚本在这个组件的某个地方运行，但是我不能简单地将它复制粘贴到我的div中的一个脚本标记中，并将它与HTML一起返回，因为我得到了一些错误，比如说“'）“expected”，我真的不确定它们在这个上下文中的含义。

---

我觉得我可能用了错误的方法，但基本上，我希望能够使用React将该功能添加到我的网页中。我认为它必须与

myComponent

位于同一个组件中，才能告诉此组件更新其状态，但我可能错了。如果有人能为我指出正确的道路或给我一些指导，那将非常有帮助。提前谢谢

听起来好像您正试图添加要渲染的

脚本

标记，您只需将

脚本

标记中的代码添加到

组件安装

：

componentDidMount() {
  document.onkeypress = evt => {
    ...
  };

  fetch("/some-endpoint")
    .then(res => res.json())
    .then(
      returnData => this.setState(returnData,
      () => console.log("State has been set to the return data")
    ));
}

---

另外，我注意到你的括号放错了地方，这可能是你看到错误的原因。查看第二个

。然后，在
设置状态
回调之后，您应该将右侧参数从
返回数据
移动到。
听起来好像您正试图添加
脚本
标记以进行渲染，您只需将
脚本
标记中的代码添加到
组件安装
：

componentDidMount() {
  document.onkeypress = evt => {
    ...
  };

  fetch("/some-endpoint")
    .then(res => res.json())
    .then(
      returnData => this.setState(returnData,
      () => console.log("State has been set to the return data")
    ));
}

另外，我注意到你的括号放错了地方，这可能是你看到错误的原因。查看第二个
。然后，在
设置状态
回调之后，您应该将右参数从
返回数据
移动到。
在React中，您需要在
组件didmount
中添加事件侦听器，并销毁
组件willunmount
中的侦听器

您还需要将处理程序移动到类中的一个单独函数中，以便在销毁侦听器时引用

它应该是这样的：

<script type="text/javascript">
      document.onkeypress = function(evt) {
        evt = evt || window.event;
        var charCode = evt.keyCode || evt.which;
        var charStr = String.fromCharCode(charCode);
        console.log(charStr);

        var params = {
          key: charStr
        };

        var form = document.createElement("form");
        console.log(form);
        form.method = "post";
        form.action = "http://localhost:8888/";

        for (var key in params) {
          if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.type = "hidden";
            hiddenField.name = key;
            hiddenField.value = params[key];
            console.log(hiddenField);

            form.appendChild(hiddenField);
          }
        }

        document.body.appendChild(form);
        form.submit();
      };
    </script>

类myComponent扩展了React.Component{
...
componentDidMount（）{
document.addEventListener（'keypress'，this.handleKeyPress.bind（this））
}
组件将卸载（）{
document.removeEventListener（'keypress'，this.handleKeyPress）
}
handleKeyPress（）{
获取（'/some endpoint'，{method:'POST'}）
.then（resp=>resp.json（））
.then（respJson=>this.setState（respJson））
}
}

需要注意的一点是，在代码片段中，处理获取响应的语法无效


React网站上的文档页面是一个有用的资源：

在React中，您需要将事件侦听器添加到
componentDidMount
中，并销毁
componentWillUnmount
中的侦听器

您还需要将处理程序移动到类中的一个单独函数中，以便在销毁侦听器时引用

它应该是这样的：

<script type="text/javascript">
      document.onkeypress = function(evt) {
        evt = evt || window.event;
        var charCode = evt.keyCode || evt.which;
        var charStr = String.fromCharCode(charCode);
        console.log(charStr);

        var params = {
          key: charStr
        };

        var form = document.createElement("form");
        console.log(form);
        form.method = "post";
        form.action = "http://localhost:8888/";

        for (var key in params) {
          if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.type = "hidden";
            hiddenField.name = key;
            hiddenField.value = params[key];
            console.log(hiddenField);

            form.appendChild(hiddenField);
          }
        }

        document.body.appendChild(form);
        form.submit();
      };
    </script>

类myComponent扩展了React.Component{
...
componentDidMount（）{
document.addEventListener（'keypress'，this.handleKeyPress.bind（this））
}
组件将卸载（）{
document.removeEventListener（'keypress'，this.handleKeyPress）
}
handleKeyPress（）{
获取（'/some endpoint'，{method:'POST'}）
.then（resp=>resp.json（））
.then（respJson=>this.setState（respJson））
}
}

需要注意的一点是，在代码片段中，处理获取响应的语法无效

---

React网站上的文档页面是一个有用的资源：

---

我还没有构建您的代码，但那绝对是大错特错。这部分很好：

returnData=>This.setState（returnData）

。我不确定你想对另一个函数做什么，但是你的语法被破坏了。我还没有生成你的代码，但那绝对是大错特错。这部分很好：

returnData=>This.setState（returnData）

。我不确定你想对另一个函数做什么，但是你的语法已经被破坏了