React: create offable Alert component

Question

Я пытаюсь создать компонент 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> 
    ) 
    } 
} 

Это рабочий код для компонента «Предупреждение», и щелчок по кнопке закрытия внутри спрячет его. Вот вопрос:

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

У меня есть Логическое значение, указывающее, если мне нужно, чтобы показать/скрыть компонент предупреждения. Но если я закрою предупреждение, оно больше не будет отображаться. Как я могу это исправить?

Answer 1

Чтобы установить состояние предупреждения, установите состояние в форме и передайте состояние в качестве реквизита. Тогда он должен работать. И onclick предупреждения обновляет состояние компонента загрузки формы, используя функцию обратного вызова.

Answer 2

Да, прохождение булевского также может скрыть его. Вот еще макет кода

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