Question

我试图找出一种从已映射到父组件的子组件传递（event.target）的方法。问题是，当我映射它时，我尝试用＆＃34;这个＆＃34;设置的任何属性。变得不确定。

示例：

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>
    );
  }
});

现在我收到错误＆＃34;无法读取属性＆＃39; onChange＆＃39;未定义＆＃34;

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

Answer 1

这是因为在map函数中，这并不是指外部上下文（您的组件）。

要解决这个问题，你需要告诉map函数使用什么上下文..你可以这样做（最后注意这一点）： -

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

或者，如果您使用的是ES6，则可以使用箭头功能（捕获封闭上下文的＆＃39;此值）。因此，您的地图将转换为： -

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

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

1 个答案: