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函數，然後調用父函數

回答

相關問題