Javascript 如何在react中使用settimeout方法?

Javascript 如何在react中使用settimeout方法?,javascript,reactjs,Javascript,Reactjs,我想知道如何使用setTimeout()方法。基本上,我想在几秒钟后单击元素,然后执行一些操作 我的代码如下: class SomeComponent extends React.PureComponent { on_first_render = () => { this.somemethod_called(); setTimeout(() => { this.props.handle_click(52, 16);

我想知道如何使用
setTimeout()
方法。基本上,我想在几秒钟后单击元素,然后执行一些操作

我的代码如下:

class SomeComponent extends React.PureComponent {
    on_first_render = () => {
        this.somemethod_called();
        setTimeout(() => {
            this.props.handle_click(52, 16);
        },0);
        setTimeout(() => {
            this.props.handle_click(522, 352);
         }, 0)

         setTimeout(() => {
             const input = document.querySelector('input[type=text] 
                           [name=somename]');
             input && input.blur();
         }, 700);
从上面的代码中可以看出,在两个
setTimeout()
方法中调用了相同的
handle\u click()
方法,7秒钟后,我在文档中搜索输入元素并从中移除焦点

我觉得这是一种笨拙且不正确的方法。。。有没有人能让我知道如何用另一种方式来做,而不是像这样重复


谢谢。

事实上,您的
设置超时
没有等待任何东西;您正在排队等待三个超时,分别在0、0和700毫秒后解决

虽然我不太确定你到底在追求什么,或者如果你是以一种非常惯用的反应方式做事,但我建议使用
async
/
await
和一个“delay”助手函数:

const delay=ms=>新承诺(resolve=>setTimeout(resolve,ms));
const onFirstRender=async()=>{
这个.somemethod_调用了();
等待延迟(100);
这个.props.handle\u click(52,16);
等待延迟(100);
这个.props.handle_-click(522352);
等待延迟(700);
const input=document.querySelector(“input[type=text][name=somename]”;
如果(输入){
input.blur();
}
};

在任何操作中,您都可以使用反Bounce进行延迟,而不是使用setTimeOut

var SearchBox = React.createClass({
  componentWillMount: function () {
     this.delayedCallback = _.debounce(function (event) {
       // "event.target" is accessible now
     }, 1000);
  },

  onChange: function (event) {
    event.persist();
    this.delayedCallback(event);
  },

  render: function () {
    return (
      <input type="search" onChange={this.onChange} />
    );
  }

});
var SearchBox=React.createClass({
componentWillMount:函数(){
this.delayedCallback=\ u0.debounce(函数(事件){
//现在可以访问“event.target”
}, 1000);
},
onChange:函数(事件){
event.persist();
此.delayedCallback(事件);
},
渲染:函数(){
返回(
);
}
});
有关更多详细信息,请浏览本模块

你到底想做什么?一般来说,您不应该将
document.querySelector()
与React混合使用;为什么不直接做
handle\u click()
所做的事情呢?另外,
{52,16}
是无效的Javascript…我使用了queryselector而不是state,因为我不想使用从其他组件传递的状态并修改使用较少的组件的核心代码…而且这在一个语句中完成,可以在以后轻松删除。我已经编辑了我的问题来修正打字错误。该输入元素在单击完成后出现在对话框中,因此我使用settimeout等待该元素出现并执行模糊。句柄点击用于设置超时,因为它第一次点击一个点,第二次在给定坐标处创建一条线。如果我理解正确的话,这不是OP真正想要的。。。