javascript - react : create dismissable Alert component

Question

我正在尝试创建一个 React 组件，它将使用 Bootstrap alert 类来显示错误。问题是我想让它可以关闭，但是在 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>
    )
  }
}

根父节点:

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>
    )
  }
}

我有一个 bool 值指示我是否需要显示/隐藏警报组件。但如果我关闭警报，它将不会再次显示。我该如何解决这个问题？

Answer 1

与其设置警报状态，不如在表单中设置状态并将状态作为 Prop 传递。它应该工作。警报的 onclick 使用回调函数更新表单上传组件的状态。