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”值）。因此，您的地图将转换为：-

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