Binding Datengitter zu bilden

Question

Ich habe eine einfache Tabelle mit Daten auf der linken Seite meiner Benutzeroberfläche und ein Formular auf der rechten Seite. Als ein neuer Benutzer von ReactJS konnte ich dies ohne große Schwierigkeiten erreichen. Ich möchte jedoch, dass der Benutzer in der Lage ist, aus jeder Zeile auf die Spalte Name zu klicken und das Formular rechts ausfüllen zu lassen. Ich habe eine ähnliche Seite mit jQuery und einer kleinen Routing-Bibliothek, wo ich einfach jede Zeile mit einer Route wie # edit /: id verknüpfen und jQuery verwenden, um manuell über die Selektoren zu binden. Der Grund, warum ich React ausprobiere, ist zu vermeiden, dass ich dies tun muss.

Überall hier ist mein Code so weit. Nur eine Haupt-App-Komponente mit dem Formular und der Tabelle in separaten Komponenten.

var TplList = React.createClass({ 
    getInitialState() { 
     return { 
      data: { rows: [] } 
     }; 
    }, 

    componentDidMount() { 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      url: this.props.url, 
      success: function(response) { 
       //console.log(response); 
       this.setState({ 
        data: response 
       }); 
      }.bind(this), 
      error: function(xhr, status, err) { 
       console.error(this.props.url, status, err.toString()); 
      }.bind(this) 
     }); 
    }, 

    render: function() { 
     var tblRows = this.state.data.rows.map(function(result, index) { 
      return <TplRow key={index} tpl={result} /> 
     }); 

     return (
      <div> 
       <h3 className="formHeader">Workcell - Master Templates</h3> 
       <table id="tplDataTable" width="100%" className="form" cellpadding="2" cellspacing="0" border="0"> 
        <thead> 
         <tr className="titleGreen"> 
          <th>Name</th> 
          <th>By</th> 
          <th>Date</th> 
          <th className="th_right">R/C</th> 
          <th className="th_right">Copies</th> 
          <th className="th_right">Vol (10mM)</th> 
         </tr> 
        </thead> 
        <tbody>{tblRows}</tbody> 
       </table> 
      </div> 
     ); 
    } 
}); 

var TplRow = React.createClass({ 
    handleNameClick: function() { 
    }, 

    render: function() { 
     var tpl = this.props.tpl; 
     var cls = (tpl.index % 2 > 0) ? "" : "alt"; 
     var volume = (tpl.volume > 0) ? tpl.volume + "\u00b5" + "l" : "\u00a0"; 
     return (
      <tr className={cls}> 
       <td><a href="#" onClick={handleNameClick}>{tpl.name}</a></td> 
       <td>{tpl.username}</td> 
       <td>{tpl.cre_date}</td> 
       <td>{tpl.compound_placement}</td> 
       <td>{tpl.copies}</td> 
       <td>{volume}</td> 
      </tr> 
     ); 
    } 
}); 


var TplForm = React.createClass({ 
    getInitialState() { 
     return { 
      "copies": 10 
     }; 
    }, 
    render: function() { 
     return (
      <div> 
       <h3 className="formHeader">Edit Master Template</h3> 
       <table className="form" width="100%" cellpadding="3" cellspacing="0"> 
        <tbody> 
         <tr> 
          <td className="label"><label htmlFor="tplCopies">Copies</label></td> 
          <td className="field"> 
           <input 
            type="number" min="0" max="500" 
            name="tplCopies" 
            id="tplCopies" 
            value={this.state.copies} /> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     ); 
    } 
}); 

var MasterTemplateApp = React.createClass({ 
    render: function() { 
     return ( 
     <div id="container"> 
      <div id="wc_tpl_left"> 
       <TplList url="/cfc/com_admin_transfer.cfc?method=getWCTemplateData" /> 
      </div> 
      <div id="wc_tpl_right"> 
       <TplForm /> 
      </div> 
      <div className="tpl_clear"></div> 
     </div> 
     ); 
    } 
}); 


ReactDOM.render(<MasterTemplateApp />, document.getElementById('app_wc_master_tpl')); 

Answer 1

sollten Sie Ihre handleNameClick Verfahren wie dieses schreiben

handleNameClick: function() { 
    ReactDOM.render(<TplForm />, document.getElementById('wc_tpl_right')) 
} 

vergessen Sie nicht TplForm entfernen

<div id="wc_tpl_right"> 
    <TplForm /> 
</div> 

hoffe, das hilft