ReactJS: onClick Element ändern

Question

Ich habe gerade angefangen React zu lernen und habe eine Frage.

Ich möchte folgendes tun:

Wenn ein Benutzer auf einem Absatz klickt ich das Element in ein Eingabefeld geändert werden soll, die den Inhalt des Absatzes vorbelegt hat. (Das Endziel ist die direkte Bearbeitung, wenn der Benutzer bestimmte Berechtigungen hat)

Ich bin so weit gekommen, aber bin total ratlos.

var AppHeader = React.createClass({ 
    editSlogan : function(){ 
     return (
      <input type="text" value={this.props.slogan} onChange={this.saveEdit}/> 
     ) 
    }, 
    saveEdit : function(){ 
     // ajax to server 
    }, 
    render: function(){ 
     return (
      <header> 
       <div className="container-fluid"> 
        <div className="row"> 
         <div className="col-md-12"> 
          <h1>{this.props.name}</h1> 
          <p onClick={this.editSlogan}>{this.props.slogan}</p> 
         </div> 
        </div> 
       </div> 
      </header> 
     ); 
    } 
}); 

Wie kann ich die von der editSlogan Funktion machen außer Kraft setzen?

Answer 1

Wenn ich Ihre Fragen richtig verstanden habe, möchten Sie im Falle eines "onClick" -Ereignisses ein anderes Element rendern.

Dies ist ein großartiger Anwendungsfall für Reaktionszustände.

Nehmen Sie das folgende Beispiel

React.createClass({ 
    getInitialState : function() { 
     return { showMe : false }; 
    }, 
    onClick : function() { 
     this.setState({ showMe : true}); 
    }, 
    render : function() { 
     if(this.state.showMe) { 
      return (<div> one div </div>); 
     } else { 
      return (<a onClick={this.onClick}> press me </a>); 
     } 
    } 
}) 

Dies wird den Komponenten Status ändern, und macht reagieren die div anstelle des a-Tag machen. Wenn ein Komponentenstatus geändert wird (mithilfe der setState-Methode), berechnet React, ob es sich erneut selbst rendern muss und in welchem ​​Fall die Teile der Komponente neu gerendert werden müssen.

Mehr über Zustände https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html