Question

我对es6相对较新并做出反应。我正在跟进一个关于创建反应组件的教程，并想知道es6箭头函数在定义组件函数时是否会起作用。鉴于使用箭头函数时“this”的词汇范围，我认为它会起作用。

但是'这个'对象似乎正在解决babel转换代码中的'undefined'问题。关于为什么这不能解析为定义组件变量的任何具体解释？虽然使用方法速记和扩展es6类是有效的，但我只是很好奇。

带箭头功能的组件：

const PromptContainer = React.createClass({
  getInitialState: () => ({
    username: '',
  }),
  onInputChange: (e) => {
    this.setState({
      username: e.target.value,
    });
  },
  render: () => (
    <div className="jumbotron col-sm-6 col-sm-offset-3 text-center">
      <h1>{this.props.header}</h1>
      <div className="col-sm-12">
        <form>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              onChange={this.onInputChange}
              placeholder="Github Username"
              value={this.state.username}
            />
          </div>
        </form>
      </div>
    </div>
  ),
});

Answer 1

鉴于使用箭头功能时'this'的词汇范围，我认为它会起作用。

然后你误解了词汇范围的含义。它与你想要的完全相反。

        //...
        foreach (Session::get('product') as $key =>$value)
        {
           $item = array([
                       "id_buy"       => $id_buy[$key],
                       "name_product" => $name_product[$key], 
                       "picture"      => $picture[$key], 
                       "price"        => $price[$key], 
                       "quantity"     => $quantity[$key]
            ]);

        // move here
        DB::table('detail_bills')->insert($item );


        }


 }

几乎与

完全相同

var foo = () => this;

表示

var _temp = this;
var foo = () => _temp;

是

const PromptContainer = React.createClass({
  getInitialState: () => {
    this;
  },
  onInputChange: (e) => {
    this;
  },
  render: () => {
    this;
  },
});

所以你的函数都没有访问函数的var _temp = this; const PromptContainer = React.createClass({ getInitialState: () => { _temp; }, onInputChange: (e) => { _temp; }, render: () => { _temp; }, });，他们访问this调用之外的this，这是未定义的。

如果您想要一个简短的方法来编写您想要的内容，请使用简洁的方法语法：

createClass

Answer 2

您应该将this绑定到事件处理程序方法：

onChange={this.onInputChange.bind(this)}

如果与es6箭头函数

2 个答案: