javascript - React JS - 映射对象的事件处理

Question

我正在尝试找出一种从已映射到父组件的子组件传递 (event.target) 的方法。问题是，当我映射它时，我尝试用“this”设置的任何属性都变得未定义。

示例:

var OptionChoices = [
  {value: 'bad', label: "Select a field"},
  {value: 'blue', label: "Blue"},
  {value: 'red', label: "Red"},
  {value: 'green', label: "Green"},
  {value: 'pink', label: "Pink"}
  ];

var CategoryRow = React.createClass({
  getInitialState: function () {
    return{array : [{order: "1"}]};
    },
  onChange: function(event){
    console.log("YAY");
    },
  render: function() {
    return (
      <div className={this.props.categoryClass}>
        <h3>{this.props.text}</h3>
        {this.state.array.map(function(option){
          return (
            <Dropdown onChange={this.onChange} options={OptionChoices} key={option.order} />
            );
        })}
    </div>
    );
  }
});

var Dropdown = React.createClass({
  getInitialState: function () {
    return{firstTime: true};
  },
  onChange: function(event){
    var x = event.target;
    if (this.state.firstTime===true) {
      if (typeof this.props.onChange === 'function') {
        this.props.onChange(event.target);
    }
  }
    this.setState({firstTime: false});
  },
  render: function() {
    return (
      <select onChange={this.onChange} className={this.props.dropdownClass}>
        {this.props.options.map(function(option){
          return (
              <Option value={option.value} key={option.value}>{option.label}</Option>
            );
        })}
    </select>
    );
  }
});

现在我收到错误“无法读取未定义的属性‘onChange’”

任何/所有想法表示赞赏。谢谢!

Answer 1

这是因为在 map 函数中，this 并不引用外部上下文(您的组件)。

要解决此问题，您需要告诉 map 函数要使用什么上下文。您可以按如下方式执行此操作(请注意末尾的 this):-

this.state.array.map(function(option){
      return (
        <Dropdown onChange={this.onChange} options={OptionChoices} key={option.order} />
        );
    }, this)

或者，如果您使用 ES6，则可以使用箭头函数(捕获封闭上下文的“this”值)。所以你的 map 将转换成类似的东西:-

this.state.array.map(option => {
      return (
        <Dropdown onChange={this.onChange} options={OptionChoices} key={option.order} />
        );
    })