Asp.net mvc 在一个jsx文件中找到来自不同组件类的变量控制？

我在React JS中制作了一个在基本表中添加/删除数据的示例。一切都正常，但现在我必须将行值放入文本框中进行编辑操作

尝试获取变量值，如

var cname=this.refs.cname.getDOMNode（）.value从一个组件
NewRow
function
handleRowSubmit
并在另一个组件
Company
function
handleRowEdit
中设置其值。但对我来说没有任何效果

JSX文件：

  var CompanyApp = React.createClass({
    getInitialState: function() {
      return {
               companylist : this.props.companies
          };
    },

    handleNewRowSubmit: function(newcompany) {
        this.setState( {companylist: this.state.companylist.concat([newcompany])} );
    },

    handleCompanyRemove: function( company ) {
      var index = -1;   
      var clength = this.state.companylist.length;
        for( var i = 0; i < clength; i++ ) {
            if( this.state.companylist[i].cname === company.cname ) {
                index = i;
                break;
            }
        }
        this.state.companylist.splice( index, 1 );  
        this.setState( {companylist: this.state.companylist} );
    },
    render: function() {
      var tableStyle = {width: '100%'};
      var leftTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
      var rightTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
      return ( 
        <table style={tableStyle}>
          <tr>
            <td style={leftTdStyle}>
              <CompanyList clist={this.state.companylist}  onCompanyRemove={this.handleCompanyRemove}/>
            </td> 
            <td style={rightTdStyle}>
              <NewRow onRowSubmit={this.handleNewRowSubmit}/>

            </td>
          </tr>
      </table>
      );
    }
  });

  var CompanyList = React.createClass({
    handleCompanyRemove: function(company){
      this.props.onCompanyRemove(company);
    },



    render: function() {
      var companies = [];
      var that = this; 

    // TODO: Needs to find out why that = this made it work; Was getting error that onCompanyDelete is not undefined
      this.props.clist.forEach(function(company) {
       companies.push(<Company company={company} onCompanyDelete={that.handleCompanyRemove} /> );

     });
      return ( 
        <div>
          <h3>List of Companies</h3>
          <table className="table table-striped" id="tableId">
            <thead><tr><th>Company Name</th><th>Employees</th><th>Head Office</th><th>Action</th></tr></thead>
            <tbody>{companies}</tbody>
          </table>
        </div>
        );
    }
  });

 var Company = React.createClass({

    handleRemoveCompany: function() {
          this.props.onCompanyDelete( this.props.company );
          return false;
        },

    handleRowEdit:function() {
                 var name = this.state.vals;
                 var rows = document.getElementsByTagName('tr');
                   var HO = '' ;
             var CompName = '' ;
        var noOfEmployees = '' ;

    for ( var i = 1; i < rows.length; i++) 
        {
                rows[i].i = i;
          rows[i].onclick = function()
           {
                     CompName = rows[this.i].cells[0].innerHTML;                
                noOfEmployees = rows[this.i].cells[1].innerHTML;
                           HO = rows[this.i].cells[2].innerHTML;


                alert("rows---" + CompName + noOfEmployees + JSON.stringify(vals));   

      // here i got the selected row but don't know how to get textbox control here

            };
         }

    },

    render: function() {
      return (
        <tr>
          <td>{this.props.company.cname}</td>
          <td>{this.props.company.ecount}</td>
          <td>{this.props.company.hoffice}</td>
          <td><input type="button"  className="btn btn-primary" value="Edit" onClick = {this.handleRowEdit}  /></td>
          <td><input type="button"  className="btn btn-primary" value="Remove" onClick = {this.handleRemoveCompany}/></td>
        </tr>
        );
    }
  });

  var NewRow = React.createClass({

     handleSubmit: function(cname) {
     var cname = this.refs.cname.getDOMNode().value;
     var ecount = this.refs.ecount.getDOMNode().value;
     var hoffice = this.refs.hoffice.getDOMNode().value;

     var newrow = {cname: cname, ecount: ecount, hoffice: hoffice };
      this.props.onRowSubmit(newrow);

      this.refs.cname.getDOMNode().value = '';
      this.refs.ecount.getDOMNode().value = '';
      this.refs.hoffice.getDOMNode().value = '';
      return false;
    },

     componentDidMount: function(){
      this.refs.cname.getDOMNode().focus(); 
    },


    render: function() {
      var inputStyle = {padding:'12px'}
      return ( 
        <div className="well">
          <h3>Add A Company</h3>
        <form onSubmit={this.handleSubmit}>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8"  placeholder="Company Name" ref="cname" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Employee Count" ref="ecount" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Headoffice" ref="hoffice" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="submit"  className="btn btn-primary" value="Add Company" required/>
          </div>
        </form>
        </div>
        );
    }
  });


  var defCompanies = [{cname:"Infosys Technologies",ecount:150000,hoffice:"Bangalore"},
                      {cname:"TCS",ecount:140000,hoffice:"Mumbai"}];
  React.render( <CompanyApp companies={defCompanies} />, document.getElementById("companyApp"));

var CompanyApp=React.createClass({
getInitialState:函数（）{
返回{
公司列表：这个。道具。公司
};
},
handleNewRowSubmit:函数（新公司）{
this.setState（{companylist:this.state.companylist.concat（[newcompany]）}）；
},
handleCompanyRemove:功能（公司）{
var指数=-1；
var clength=this.state.companylist.length；
对于（变量i=0；i
您需要将所选公司传递到新行组件中

为此，创建一个新函数，并将信息传递回组件链，然后将其传递到新行组件中

handleRowEdit:function() {
    var HO = this.props.company.cname;
    var CompName = this.props.company.hoffice;
    var noOfEmployees = this.props.company.ecount;
    console.log("rows---" + CompName + noOfEmployees);
    this.props.onEdit(this.props.company)
 }

下面的plnkr将获取需要到达的位置的信息。我将让您提取公司信息并将其添加到正确的字段中

您需要将所选公司传递到新行组件中

为此，创建一个新函数，并将信息传递回组件链，然后将其传递到新行组件中

handleRowEdit:function() {
    var HO = this.props.company.cname;
    var CompName = this.props.company.hoffice;
    var noOfEmployees = this.props.company.ecount;
    console.log("rows---" + CompName + noOfEmployees);
    this.props.onEdit(this.props.company)
 }

下面的plnkr将获取需要到达的位置的信息。我将让您提取公司信息并将其添加到正确的字段中

我已经找到了我自己问题的答案

只需在行内创建
文本框
，即可进行编辑操作

JSX文件：

 var CompanyApp = React.createClass({
    getInitialState: function() {
      return {
               companylist : this.props.companies

          };
    },

    handleNewRowSubmit: function(newcompany) {
        this.setState( {companylist: this.state.companylist.concat([newcompany])} );
    },

    handleCompanyRemove: function( company ) {
      var index = -1;   
      var clength = this.state.companylist.length;
        for( var i = 0; i < clength; i++ ) {
            if( this.state.companylist[i].cname === company.cname ) {
                index = i;
                break;
            }
        }
        this.state.companylist.splice( index, 1 );  
        this.setState( {companylist: this.state.companylist} );
    },

    render: function() {
      var tableStyle = {width: '100%'};
      var leftTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
      var rightTdStyle = {width: '50%',padding:'20px',verticalAlign: 'top'};
      return ( 
        <table style={tableStyle}>
          <tr>
            <td style={leftTdStyle}>
              <CompanyList clist={this.state.companylist}  onCompanyRemove={this.handleCompanyRemove} />
            </td> 
            <td style={rightTdStyle}>
              <NewRow onRowSubmit={this.handleNewRowSubmit } />
            </td>
          </tr>
      </table>
      );
    }
  });

  var CompanyList = React.createClass({
    handleCompanyRemove: function(company){
      this.props.onCompanyRemove(company);
    },

    render: function() {
      var companies = [];
      var that = this; 

    // TODO: Needs to find out why that = this made it work; Was getting error that onCompanyDelete is not undefined
      this.props.clist.forEach(function(company) {
       companies.push(<Company company={company} onCompanyDelete={that.handleCompanyRemove} /> );

     });
      return ( 
        <div>
          <h3>List of Companies</h3>
          <table className="table table-striped" id="tableId">
            <thead><tr><th>Company Name</th><th>No. Of Employees</th><th>Head Office</th><th>Action</th></tr></thead>
            <tbody>{companies}</tbody>
          </table>
        </div>
        );
    }
  });

  var Company = React.createClass({
      getInitialState : function(){
            return {
                    editing  : false,
                    cname : this.props.company.cname,
                    ecount : this.props.company.ecount,
                    hoffice : this.props.company.hoffice,

                };
      },
      _onchangeCname:function(event) {
        this.setState({cname : event.target.value});
      },
      _onchangeEmpCount:function(event){
         this.setState({ecount : event.target.value});
      },
      _onchangeCompHO:function(event){
        this.setState({hoffice : event.target.value});

      },    

    handleRemoveCompany: function() {
          this.props.onCompanyDelete( this.props.company );
          return false;
        },

    handleRowEdit:function() {

        var getCName    = this.state.cname.trim();
        var getEmpCount = this.state.ecount;
        var getCompHO = this.state.hoffice;

         this.setState({  
                            getCName : this.state.cname,
                        getEmpCount : this.state.ecount,
                        getCompHO : this.state.hoffice
                     }) 

       this.setState({editing : true });
         return false;
    },
    handleUpdateRow:function(){

            var getCName    = this.state.cname.trim();
            var getEmpCount = this.state.ecount;
            var getCompHO = this.state.hoffice;

             this.setState({  
                                getCName : this.state.cname,
                            getEmpCount : this.state.ecount,
                            getCompHO : this.state.hoffice
                         }) 
        alert("updated vals "+ getCName+","+getEmpCount+","+getCompHO );

          this.props.company.cname = getCName;
          this.props.company.ecount = getEmpCount;
          this.props.company.hoffice = getCompHO;

         this.setState({editing : false });
         return false;
    },
    handleCancelEdit : function(){
     this.setState({editing : false });
      return false;
    },


    render: function() {
         var inputStyle = {padding:'-3px'};
         var EditBtn = <input type ="button"  className ="btn btn-primary" 
                            value ="Edit" onClick ={this.handleRowEdit} />;
         var UpdateBtn = <input type ="button"  className ="btn btn-primary" 
                            value ="Update" onClick ={this.handleUpdateRow} />;
         var RemoveBtn = <input type ="button"  className ="btn btn-primary" 
                            value ="Remove" onClick ={this.handleRemoveCompany}/>;
         var CancelEditBtn = <input type ="button"  className ="btn btn-primary" 
                             value ="Cancel" onClick = {this.handleCancelEdit}/>;
        return(
             <tr>
                    <td>{this.state.editing ? <input type="text" style={inputStyle} ref="CompName" 
                                                value={this.state.cname} onChange={this._onchangeCname} /> 
                                            : this.props.company.cname}</td>
                    <td>{this.state.editing ? <input type="text" style={inputStyle} ref="EmpCount"
                                                value={this.state.ecount} onChange={this._onchangeEmpCount} /> 
                                            : this.props.company.ecount}</td>
                    <td>{this.state.editing ? <input type="text" style={inputStyle} ref="CompHO"
                                              value={this.state.hoffice} onChange={this._onchangeCompHO}/> 
                                            : this.props.company.hoffice}</td>
                    <td>{this.state.editing ? UpdateBtn : EditBtn }</td>
                    <td>{this.state.editing ? CancelEditBtn : RemoveBtn}</td>
                </tr>
            )
      }
  });


  var NewRow = React.createClass({

     handleSubmit: function() {
     var cname = this.refs.cname.getDOMNode().value;
     var ecount = this.refs.ecount.getDOMNode().value;
     var hoffice = this.refs.hoffice.getDOMNode().value;

     var newrow = {cname: cname, ecount: ecount, hoffice: hoffice };
      this.props.onRowSubmit(newrow);

      this.refs.cname.getDOMNode().value = '';
      this.refs.ecount.getDOMNode().value = '';
      this.refs.hoffice.getDOMNode().value = '';
      return false;
    },

     componentDidMount: function(){
      this.refs.cname.getDOMNode().focus(); 
    },

    render: function() {
      var inputStyle = {padding:'12px'}
      return ( 
        <div className="well">
          <h3>Add A Company</h3>
        <form onSubmit={this.handleSubmit} >
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8"  placeholder="Company Name" 
            name="cname" ref="cname" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Employee Count" 
             ref="ecount" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Headoffice" 
            ref="hoffice" required/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="submit"  className="btn btn-primary" value="Add Company" />
          </div>
        </form>
        </div>
        );
    }
  });


  var defCompanies = [{cname:"Infosys Technologies",ecount:150000,hoffice:"Bangalore"},
                      {cname:"TCS",ecount:140000,hoffice:"Mumbai"}];
  React.render(<CompanyApp companies={defCompanies} />, document.getElementById("companyApp"));

var CompanyApp=React.createClass({
getInitialState:函数（）{
返回{
公司列表：这个。道具。公司
};
},
handleNewRowSubmit:函数（新公司）{
this.setState（{companylist:this.state.companylist.concat（[newcompany]）}）；
},
handleCompanyRemove:功能（公司）{
var指数=-1；
var clength=this.state.companylist.length；
对于（变量i=0；i