Question

我想在div中显示一条错误消息，我希望它能保持5ms的活动状态，之后它会消失，当下一条消息到来时它会再次生效。我这样想：

<div id="error"> <UserSignupMessagesView /> </div> 

 $(".error").slideDown();
        setTimeout(function() {
            $(".error").slideUp();
        }, 5000);

但它根本没有帮助。请帮助。

Answer 1

var UserSignupMessagesView = React.createClass({
  getInitialState: function(){
    return{
      display: 0,
      message: ""
    }
  },
  changeDisplay: function(count){
    this.setState({display: this.state.display + count})
  },
  setErrorMsg: function(message){
    this.setState({message: message})
  },
  render: function(){
    return(
      <div>
      <ErrorGenerator newMessage={this.setErrorMsg}
                      displayOrNot={this.changeDisplay}/>
      {(this.state.display!=0) ?
      <DisplayIt message = {this.state.message} />
      : null}
      </div>
    )
  }
});

  var ErrorGenerator = React.createClass({
    handleUserInput: function(){
      this.props.newMessage($("#input").val());
      //**handle displaying and hiding of the message state
      this.props.displayOrNot(1);
      setTimeout(function(self) {
           self.props.displayOrNot(-1);
       }, 5000, this);
      //**
    },
    render: function(){
      return(
      <div>
      demo: input an error: <input id = "input" type= "text" /><br />
      <button type="button" onClick={this.handleUserInput}>Click Me</button>
        </div>
      )
    }
  });

  var DisplayIt = React.createClass({
    render: function(){
      return   <div id = "error"> {this.props.message} </div>
    }
  });

  React.render(
    <UserSignupMessagesView />,
    document.getElementById('myDiv')
  )

我不确定你的错误是如何生成的，所以我做了一个输入文本框来模拟它（ErrorGenerator组件）。每当你点击“我”时，请点击“我”。它将显示新键入的消息，然后在5秒后它将消失。如果您输入新的消息并点击“我”，请点击“我”。在5秒结束之前，它将再次为你计算5秒钟。

在Reactjs中显示5ms后隐藏错误消息

1 个答案: