Reagieren: Erstellen Sie eine abweisende Alert-Komponente

Question

Ich versuche, eine React-Komponente zu erstellen, die bootstrap alert Klassen verwendet, um Fehler anzuzeigen. Das Problem ist, dass ich es abweisend machen möchte, aber wenn ich einen Handler in der Schließen-Schaltfläche im Alert-Teil anschließe, um es auszublenden, wird es nicht erneut gerendert, wenn ich den Fehler erneut anzeigen muss. Beispiel:

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

Dies ist ein Arbeitscode für die Alert-Komponente, und in der Schließen-Schaltfläche klicken, im Innern es verstecken. Hier ist die Frage:

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

ich einen boolean haben, wenn ich die Alert-Komponente müssen zeigen/zeigt verstecken. Aber wenn ich den Alarm schließe, wird er nicht erneut angezeigt. Wie kann ich das beheben?

Answer 1

Anstatt den Status der Warnung festzulegen, legen Sie den Status im Formular fest und übergeben Sie den Status als Requisiten. Es sollte dann funktionieren. Und klicken Sie auf den Alarm, um den Status der Formular-Upload-Komponente mit einer Callback-Funktion zu aktualisieren.

Answer 2

Ja, wenn ein boolescher Wert übergeben wird, kann dies ebenfalls ausgeblendet werden. Hier ist ein Pseudo-Code

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