將數據網格綁定到表格

我在我的用戶界面左側有一個簡單的數據表，右側有一個表單。作爲ReactJS的全新用戶，我能夠毫不費力地完成此任務。但是，我希望用戶能夠從每行單擊名稱列並使其填充右側的表單。我有一個類似的頁面使用jQuery和一個小型路由庫，我只需將每行連接到像＃edit /：id這樣的路徑，並使用jQuery通過選擇器手動綁定。我嘗試使用React的原因是爲了避免必須這樣做。將數據網格綁定到表格

到目前爲止，這裏是我的代碼。只是一個主要的應用程序組件，其中的表單和表格分開放置。

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

來源

2016-04-28 Hines Bourne

你應該寫你的handleNameClick方法這樣

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

不要忘了從

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

希望刪除TplForm這有助於

來源

2016-04-28 14:49:46

將數據網格綁定到表格

回答

相關問題