将数据网格绑定到表格

我在我的用户界面左侧有一个简单的数据表，右侧有一个表单。作为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

将数据网格绑定到表格

回答

相关问题