锚标记（一个标记）onclick 事件处理程序不起作用答案

【问题标题】：anchor tag (a tag) onclick event handler not working锚标记（一个标记）onclick 事件处理程序不起作用
【发布时间】：2023-04-17 22:17:01
【问题描述】：

虽然我已经在 reactjs 组件（名称为 renderLocationLink 的组件）的 render 方法返回的 html 中包含了 a 标签的 onclick 处理程序，但渲染正确发生在 onclick 处理程序属性没有出现在网页上呈现的 html 中。我想要无法弄清楚是什么问题，这是代码

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

【问题讨论】：

是onClick 属性在您呈现的标记中不存在的问题，还是处理程序似乎不起作用的问题？
@DanielApt ，这两种情况都是正确的，onClick 不存在于呈现的标记中并且它也不起作用....
好吧，它永远不会出现在渲染的标记中。您可能只是到目前为止将属性向下传递，并且该属性永远不会到达预期的子组件。

标签： javascript reactjs

【解决方案1】：

好的，所以我发现了哪里出了问题：

在许多组件中，您错误地使用了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 建议的完全一样。

【讨论】：

非常感谢丹尼尔 :)

【解决方案2】：

您呈现的标记将不包含onClick 属性。你在 JSX 标记中写的不是直接的 HTML 标记。

相反，React 会给你的标记一个data-reactid 属性，并确保它自己的事件处理程序在特定的data-reactid 被点击时触发一些东西。

【讨论】：

但是如何修复此代码，使其可以使用锚标记的 onClick 执行/调用函数？？

【解决方案3】：

您无需在地图函数中引用“this”即可访问本地变量。尝试访问 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> )

  }
})

【讨论】：