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

我试图找出一种方法，从映射到父组件的子组件传递（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>
    );
  }
});

var选项选择=[
{值：'坏'，标签：'选择一个字段'}，
{值：'blue'，标签：'blue'}，
{值：“红色”，标签：“红色”}，
{值：“绿色”，标签：“绿色”}，
{值：“粉红”，标签：“粉红”}
];
var CategoryRow=React.createClass({
getInitialState:函数（）{
返回{数组：[{顺序：“1”}]}；
},
onChange：函数（事件）{
控制台日志（“YAY”）；
},
render:function（）{
返回(
{this.props.text}
{this.state.array.map（函数（选项））{
返回(
);
})}
);
}
});
var Dropdown=React.createClass({
getInitialState:函数（）{
返回{firstTime:true}；
},
onChange：函数（事件）{
var x=事件目标；
if（this.state.firstTime==true）{
if（typeof this.props.onChange==='function'）{
this.props.onChange（event.target）；
}
}
this.setState（{firstTime:false}）；
},
render:function（）{
返回(
{this.props.options.map（函数（选项））{
返回(
{option.label}
);
})}
);
}
});

现在我遇到一个错误“无法读取未定义的属性'onChange'”

---

欢迎提出任何/所有想法。谢谢

这是因为在map函数中，它不引用外部上下文（您的组件）

要解决这个问题，您需要告诉map函数要使用什么上下文。。您可以按如下方式执行此操作（请注意结尾处的提示）：-

this.state.array.map（函数（选项）{
返回(
);
}，本页）

或者，如果使用ES6，也可以使用箭头函数（捕捉封闭上下文的“this”值）。因此，您的地图将转换为以下内容：-

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

this.state.array.map（选项=>{
返回(
);
})

这是因为在map函数中，它不引用外部上下文（您的组件）

要解决这个问题，您需要告诉map函数要使用什么上下文。。您可以按如下方式执行此操作（请注意结尾处的提示）：-

this.state.array.map（函数（选项）{
返回(
);
}，本页）

或者，如果使用ES6，也可以使用箭头函数（捕捉封闭上下文的“this”值）。因此，您的地图将转换为以下内容：-

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

this.state.array.map（选项=>{
返回(
);
})

您还需要将（this）绑定到

onChange

以允许在该处理程序中使用

this

。实际上，这可能已在较新版本的ReactJS中被编辑掉。您还需要将（this）绑定到

onChange

以允许在该处理程序中使用

this

。实际上，这可能已在较新版本的reactjs中编辑掉