如何默认触发器在reactjs中单击动态锚标记

时间:2016-07-26 05:12:23

标签: reactjs

这是我的渲染函数的代码:

render: function(){
  var c = $.map(this.state.x, function(){
    return(
      <a href="#" onClick={this.function()}>{x}</a>`
    )
  })

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

我在这里从变量返回动态锚标签。

默认情况下如何触发点击我的第一个锚标记?

(我想在安装后点击我的锚点)

提前致谢

1 个答案:

答案 0 :(得分:1)

调用componentDidMount中的函数以及点击链接的索引将为您提供帮助。

var Hello = React.createClass({
  
  getInitialState(){
    return {
      x: ['first', 'second', 'third', 'fourth']
    };
  },
  componentDidMount() {
    this.handleClick(0);
  },
  handleClick(idx) {
    console.log('Clicked' + this.state.x[idx]);
  },
  render: function(){
    var self = this;
    var c = this.state.x.map(function(x, index){
      return(
        <div>
        <a href="#" onClick={self.handleClick.bind(this,index)}>{x}</a></div>
      );
    })

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

});

ReactDOM.render(<Hello />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>