Question

我对Facebook的React世界还不熟悉。他们的文档看起来非常好，但有一些方面我需要一点点清晰度。这是其中之一。

Src：http://tuts-javascript.appspot.com/reactjs-add-remove-table-row

    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">
            <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;
    },
    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="Remove" onClick={this.handleRemoveCompany}/></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;
    },
    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"/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Employee Count" ref="ecount"/>
          </div>
          <div className="input-group input-group-lg" style={inputStyle}>
            <input type="text"  className="form-control col-md-8" placeholder="Headoffice" ref="hoffice"/>
          </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.renderComponent( <CompanyApp companies={defCompanies}/>, document.getElementById( "companyApp" ) );

这是ReactJS如何工作的非常好的基本解释。感谢作者。

但是这个评论，

var that = this; // TODO：需要找出为什么=这使它起作用;是否收到onCompanyDelete未定义的错误

为什么这有必要？这是正确的方法吗？如果没有，那是什么？

提前致谢。

Answer 1

ReactJS特有的“this”并不神秘。

这只是标准范围问题的一个案例，它会在JavaScript中出现回调。

当你在react组件中时，基本组件上的所有方法都将作为当前组件的this确定范围，就像任何其他JavaScript“类”一样。

在您的代码段中，您有一个render方法，它是基本组件的一个函数，因此this等于组件本身。但是在该渲染方法中，您使用this.props.clist.forEach调用回调，render方法中的任何函数回调都需要绑定到正确的this范围，或者您可以{ {1}}（虽然这是反模式，应该不鼓励）`。

示例，您的代码段的略微简化版本：

var that = this

从上面的评论中可以看出，在var MyComponent = React.createClass({ handleCompanyRemove: function(e) { // ... }, render: function() { // this === MyComponent within this scope this.props.someArray.forEach(function(item) { // this !== MyComponent, therefore this.handleCompanyRemove cannot // be called! }) } })的回调中，如果没有在外部定义变量或正确绑定函数，则无法直接使用.forEach。

解决此问题的其他选择是：

将回调函数绑定到正确的范围。例如：

this

如果您使用的是Babel / ES6，则可以使用 Fat Arrow 函数语法，该语法可确保this.props.someArray.forEach(function(item) { // this === MyComponent within this scope too now! // so you can call this.handleCompanyRemove with no problem }.bind(this))范围继续从父作用域回调。例如：

this

神秘的＆＃34;这个＆＃34;在ReactJS中

1 个答案: