ReactJS onClick事件里面的map函数，然后调用父函数

我刚刚开始使用ReactJS，我无法弄清楚如何让onClick事件在map函数内工作，该函数会呈现一些相似的元素。当我在子元素中不使用onClick = {this.someMethodName}时，一切正常，所以我猜测'this'关键字不再指向父级。ReactJS onClick事件里面的map函数，然后调用父函数

这里是我的代码，这使得一个简单的菜单栏：

var SupplierBarComponent = React.createClass({ 
doSomething: function() { 
    console.log("aaaaaaaah"); 
}, 

render: function() { 

    const suppliers = this.props.data.map(function(supplier){ 
     return (
      <option onClick={this.doSomething} key={supplier.id}>{supplier.name}</option> 
     ); 
    }, this); 

    return(
     <div>{suppliers}</div> 
    ); 

}

我怎样才能使它发挥作用？我已经阅读了一些类似的问题*，但他们的解决方案对我无效，或者我无法让他们工作。

*： React onClick inside .map then change data in another sibling component "this" is undefined inside map function Reactjs Pass props to parent component in React.js

来源

2016-11-22 handris

如果CONSOLE.LOG这个在地图的功能是它返回的组件对象？ – finalfreq

是的，它的确如此。如果我通过console.log（this.doSomething）调用它 - 所以如果没有（）s，它会打印该函数本身： 3models.jsx：9（）{ console.log（“aaaaaaaah”）; } 如果我用圆括号调用它，它首先打印'undefined'，但函数仍然被调用，并打印出'aaaah'。 – handris

你需要做'this.doSomething.bind（this）'？取决于你对doSomething的使用情况？此外，你应该得到一个综合的事件对象，将包括更多的信息... – Tracker1

您的代码工作。我已经检查过这个小提琴。我只是硬编码了一个数组而不是道具。

var Hello = React.createClass({ 
doSomething: function() { 
    console.log("aaaaaaaah"); 
}, 

render: function() { 
     var data=[{id:1,name:'name 1'},{id:2,name:'name 2'}] 
    const suppliers = data.map(function(supplier){ 
     return (
      <option onClick={this.doSomething} key={supplier.id}>{supplier.name}</option> 
     ); 
    }, this); 

    return(
     <div>{suppliers}</div> 
    ); 
} 
}) 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
);

https://jsfiddle.net/evweLre5/

来源

2016-11-22 17:53:40

谢谢你努力检查出来，它显然在小提琴中工作。那么我的本地机器上会出现什么问题呢？我只是不知道去哪里看。 – handris

我对你的第一个建议是开始使用ES6约定来反应代码。 –

我在本地也尝试过它，它工作得很好。 –

ReactJS onClick事件里面的map函数，然后调用父函数

回答

相关问题