ReactJS: onClick cambia elemento

Question

Ho appena iniziato a imparare React e ho una domanda.

voglio fare quanto segue:

Se un utente fa clic su un paragrafo voglio cambiare l'elemento da un campo di input che ha il contenuto del paragrafo precompilato. (L'obiettivo finale è la modifica diretta se l'utente ha determinati privilegi)

Sono arrivato così lontano ma sono totalmente in perdita.

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

Come posso ignorare il rendering dalla funzione editSlogan?

Answer 1

Se ho compreso correttamente le tue domande, desideri eseguire il rendering di un elemento diverso in caso di un evento "onClick".

Questo è un ottimo caso per gli stati di reazione.

Prendiamo il seguente esempio

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

Questo cambierà lo stato dei componenti, e rende Reagire rendere il div invece della a-tag. Quando lo stato di un componente viene modificato (usando il metodo setState), React calcola se ha bisogno di eseguire il rerendering stesso e, in tal caso, quali parti del componente deve eseguire nuovamente.

informazioni sugli stati https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html