Question

我试图创建一个使用bootstrap alert类来显示错误的React组件。问题是我想让它可以被解雇，但是如果我需要再次显示错误，那么在alert div中的关闭按钮中附加处理程序以隐藏它将不会重新呈现它。例如：

class Alert extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {
      display: true
    }
  }

  handleClick() {
    this.setState({
      display: false
    })
  }

  render() {
    return (
      <div>
        {this.state.display && 
          <div className={"alert alert-" + this.props.type + " alert-dismissible mt10"}>
            {this.props.message}
            <button type="button" className="close" onClick={this.handleClick} data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
        }
      </div>
    )
  }
}

这是Alert组件的工作代码，单击其中的关闭按钮将隐藏它。问题在于：

class FormImageUpload extends React.Component {
  ...

  render() {
    return (
      <form>
        <input type="text" placeholder="Paste Image Url"/>
        {this.props.displayUploadError && 
          <Alert type="danger" message="There was an error trying to process the image. Please try again." />
        }
        <button type="submit" className="btn btn-primary mt10">SEND</button>
      </form>
    )
  }
}

root parent：

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      displayUploadError: false
    }
    this.handleRequest = this.handleRequest.bind(this)
  }


  handleRequest(image_url) {
      this.setState({
        displayUploadError: true
      })
  }


  render() {
    return (
      <div className="demo__wrap">
        <FormImageUpload 
          handleRequest={this.handleRequest}
          displayUploadError={this.state.displayUploadError}
        />
      </div>
    )
  }
}

我有一个布尔值，表明我是否需要显示/隐藏Alert组件。但如果我关闭了警报，它就不会再显示出来。我该如何解决这个问题？

Answer 1

不是设置警报的状态，而是在表单中设置状态并将状态作为props传递。它应该工作。并且单击警报会使用回调函数更新表单上载组件的状态。

Answer 2

是的，传递一个布尔值也可以隐藏它。这是一个模拟代码

    If (boolean) {
 Return Alert
} 
Else {
Return null
}

React：创建可解雇的Alert组件

2 个答案: