时间戳

首页 > 解决方案 > onClick 一个按钮 setState 到 reactjs 中的一个值而不是 undefined

javascript - onClick 一个按钮 setState 到 reactjs 中的一个值而不是 undefined

问题描述

我正在按钮上编写一个 onClick 事件来设置 a value: 0，但在第一次单击时，它会给出“未定义”值。

我在构造函数value中设置了状态null

处理函数代码

sitHandler = () => {
  this.setState({
        robotButtons: { value: 0, eventTime: Date.now() }
    });
 //am calling a socket here to send these new setState 'robotButtons' 
 data
    console.log(this.state.robotButtons);
}

这是我的带有点击事件的按钮

<Button className="robot-control-button" onClick={this.handleSit}>

我尝试过使用e.preventdefault(e)，但它会引发错误。

提前感谢您的帮助

标签： javascriptreactjs

解决方案

e.preventDefault()抛出错误，因为事件未通过。

像这样使用。

<Button className="robot-control-button" onClick={(e)=>this.handleSit(e)}>

代码是

e.preventDefault();不是e.preventdefault(e)

确保您正在接收事件，handleSit 例如 handleSit(e) { .... }

你的处理函数应该是这样的

sitHandler = (e) => {
  e.preventDefault();

  this.setState({
        robotButtons: { value: 0, eventTime: Date.now() }
    });
 //am calling a socket here to send these new setState 'robotButtons'  data
    console.log(this.state.robotButtons); // this will not work, as setState is a asynchronous call. You need to use callback function as second paramenter,
}

console.log(this.state.robotButtons);这不起作用，因为 setState 是异步调用。您需要使用回调函数作为第二个参数，

代码应该是

 this.setState({
        robotButtons: { value: 0, eventTime: Date.now() }
    }, ()=> {
     console.log(this.state.robotButtons);
     // call socket connection here
});

推荐阅读