Question

我有一个将函数传递给子组件的react组件，我将它绑定到onClick。但是当我点击时出现错误：

this.props.beBad不是函数，this.props.beBad未定义

它看起来像这样：

var Dad = React.createClass({
  beBad: function(someInput) {
    alert('being bad ' + someInput);
  },
  render: function() {
    var Children = this.state.children.map(function(data, index) {
          return (
            <Child beBad={this.beBad} key={index}/>
          );
        });
        return (
            <div>
                {Children}
            </div>      
        );
  });

var Child = React.createClass({
  beBad: function() {
   this.props.beBad('some input');
  },
  render: function() {
    return(
     <div onClick={this.beBad}>
       be bad
     </div>
    );
  }
});

Answer 1

this看起来不像你期望的那样。使用React.createClass时，React将自动绑定正确的this IFF，调用位于函数的顶层，因此在这种情况下，它将自动进行自动绑定：

render: function() {
  return (
   <div onClick={this.beBad}> // autobound
     be bad
   </div>
  );
}

但不是在这里：

var Children = this.state.children.map(function(data, index) {
  return (
    <Child beBad={this.beBad} key={index}/> // `this` is not what you expect
  );
});
return (
  <div>
    {Children}
  </div>
);

原因是因为map正在创建一个新范围，而this已不再是您所期望的，而且React无法为您自动提取。您需要明确地传递this：

var Children = this.state.children.map(function(data, index) {
  return (
    <Child beBad={this.beBad.bind(this)} key={index}/> // bind `this`
  );
}, this); // pass `this`

注意：看到其他响应，React可能会在地图中为您自动绑定它，但一般情况下我不会依赖自动绑定，显式胜过隐式。此外，如果您使用ES6类编写React，它不会进行自动绑定。

Answer 2

你的问题是因为你在＃34;地图范围＆＃34;。

尝试将this传递到您的地图：

var Children = this.state.children.map(function(data, index) {
  return (
    <Child beBad={this.beBad} key={index}/>
  );
}, this);

有关您的信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

反应传递功能给孩子不工作

2 个答案: