錨標記（標記）onclick事件處理程序不工作

雖然我已經在reactjs組件的渲染方法（名爲renderLocationLink的組件）的render方法中包含a標記的onclick處理程序，但呈現發生正確onclick處理程序屬性犯規出現在網頁上呈現的HTML。我希望沒能弄清楚什麼問題，這裏是代碼錨標記（標記）onclick事件處理程序不工作

var feedApp = React.createClass({ 
     getInitialState: function(){ 
     return { 
      data : [ 
      {display_name:"Rao",content:"this is Rao post",links:['link1','link2','link3']}, 
      {display_name:"Sultan",content:"this is Sultans",links:['link4','link5','link6']}, 
      {display_name:"John",content:"this is John post",links:['link7','link8','link9']} 
      ] 
     } 
     }, 
     fetchFeedsFromUrl: function(){ 
     console.log('Onclick triggered'); 
     }, 
     render: function(){ 
     return (<Feeds data={this.state.data} onClick={this.fetchFeedsFromUrl} />) 
     } 
}) 

var Feeds = React.createClass({ 

    render: function(){ 
     var onClickfunc = this.props.onClick; 
     var feeds = this.props.data.map(function(feed){ 
     return (
      <oneFeed name={feed.display_name} onClick={this.onClickfunc} content={feed.content} links={feed.links} /> 
     ) 
     }); 
    return( 
     <div> {feeds} </div> 
    ) 
    } 
}) 


var oneFeed = React.createClass({ 
     render: function() { 
     return (
     <div> 
      <h3>{this.props.name}</h3> 
      <renderLocationLink onClick={this.props.onClick} linkArray={this.props.links} /> 
      <p>{this.props.content} </p> 
     </div> 
     ) 
     } 
    }); 


var renderLocationLink = React.createClass({ 

    render: function(){ 
    var onClick = this.props.onClick; 
    var locationLinks = this.props.linkArray.map(function(link,index){ 
     return (<a onClick={this.onClick} href={link}>{link} </a>) 
    }) 

    return (<div >{locationLinks}</div>) 

    } 
}) 

React.renderComponent(feedApp(null),document.body);

來源

2014-10-27 Karthic Rao

是否存在''''onClick'''屬性在您的渲染標記中出現的問題，還是處理程序似乎不起作用的問題？ – 2014-10-27 15:25:04

@DanielApt，這兩種情況都是真實的，onClick不存在於呈現的標記中，並且它不工作太... – 2014-10-27 16:18:13

好吧，它永遠不會出現在呈現的標記中。您可能只是將屬性傳遞到目前爲止，並且屬性永遠不會達到預期的子組件。 – 2014-10-27 17:19:43

您不必引用「這個」你映射函數來訪問你的本地變量。嘗試訪問onClick變量時刪除「this」。

var renderLocationLink = React.createClass({ 

    render: function(){ 
    var onClick = this.props.onClick; 
    var locationLinks = this.props.linkArray.map(function(link,index){ 
     return (<a onClick={onClick} href={link}>{link} </a>) 
    }) 

    return (<div >{locationLinks}</div>) 

    } 
})

來源

2014-10-27 15:01:18 Butters

謝謝@Butters :) – 2014-10-27 18:54:13

您的呈現標記將不包含onClick屬性。您在JSX標記中編寫的內容不是直接的HTML標記。

React會給你的標記一個data-reactid屬性，並確保它自己的事件處理程序在單擊某個特定的data-reactid時觸發某些內容。

來源

2014-10-27 15:11:42

但是，如何解決這個代碼，以便它執行/調用與錨點標籤onClick函數?? – 2014-10-27 16:19:24

好了，我已經找到了在那裏出了問題：

在許多組件，您使用this不正確。您在渲染功能中使用this。所以，而不是使用 {this.onClick}你應該一直在使用{onClick}。

看看這個例子，我們如何在返回的渲染中使用{onClick}（而不是{this.onClick}）。

var Feeds = React.createClass({ 

    render: function(){ 
     var onClickfunc = this.props.onClick; 
     var feeds = this.props.data.map(function(feed){ 
     return (
      <oneFeed name={feed.display_name} onClick={onClickfunc} content={feed.content} links={feed.links} /> 
     ) 
     }); 
    return( 
     <div> {feeds} </div> 
    ) 
    } 
})

這裏有一個工作的jsfiddle：http://jsfiddle.net/kb3gN/6771/

PS：這是完全一樣的Butters建議。

來源

2014-10-27 17:39:17

非常感謝丹尼爾:) – 2014-10-27 18:54:37

錨標記（標記）onclick事件處理程序不工作

回答

相關問題