title: React onClick doesn't stop browser from setting anchor tag
body: <p>I'm a React newbie and ran into a problem with paging controls using link tags.  My basic paging control renders as something like this:</p>
  
  <pre><code>&lt;a href="#page2"&gt;Next&lt;/a&gt;
  </code></pre>
  
  <p>The JSX definition that renders it looks like this:</p>
  
  <pre><code>&lt;a href={"#page"+(this.props.pageIndex+1)} onClick={this.handleClick}&gt;
    {this.props.name}
  &lt;/a&gt;
  </code></pre>
  
  <p>The problem is that <strong>when you click on the Next link to go to Page 2, the browser ends up showing #page3</strong> in the URL bar, even though the code properly renders page 2.  (The code does nothing to modify the URL.) Tracing following the JavaScript in the debugger, I see that <code>window.location.href</code> stays at #page1, then jumps to #page3.</p>
  
  <p>I believe what is happening is that React is intercepting the click event, and re-renders the page properly, then the browser's default link handling fires <em>after</em> the Next link has changed to point to #page3 instead of #page2.</p>
  
  <p>Is my analysis correct?  If so, what is the proper way to make this work so the browser shows #page2 in the URL bar?</p>
  
  <p><strong>EDIT:</strong> Here is the simplified code in context:</p>
  
  <pre><code>class RecordList extends React.Component {
    changePage(pageIndex) {
      console.log("change page selected: "+pageIndex);
      this.props.changePage(pageIndex);
      return false;
    }
  
    render() {
      ...
      nextLink = (&lt;PagingLink name=" Next&gt; "pageIndex={this.props.pageIndex+1} handleClick={() =&gt; 
      this.changePage(this.props.pageIndex+1)}/&gt;)
  
      return (
        ...
        &lt;div className="paging-control"&gt;
          &lt;span&gt;Page {this.props.pageIndex+1}&lt;/span&gt;
            {nextLink}
          &lt;/div&gt;
      );
    }  
  }
  
  class PagingLink extends React.Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      this.props.handleClick(this.props.pageIndex)
    }
    render() {
      return (
          &lt;span className="pageLink"&gt;
          &lt;a href={"#page"+(this.props.pageIndex+1)} onClick={this.handleClick}&gt;
            {this.props.name}
          &lt;/a&gt;
          &lt;/span&gt;
      );
    }
  }
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        pageSize: 20,
        pageIndex: 0,
        ...
      };
    }
  
    componentDidMount() {
      var pageIndex = this.state.pageIndex;
      if (window.location.hash.indexOf("#page") === 0) {
        pageIndex = Number(window.location.hash.substring(5))-1;
        this.setState((prevState) =&gt; {
            return { pageIndex: pageIndex };
          }, () =&gt; {
          this.fetchRecords(pageIndex);
        });
      }
      else {
        this.fetchRecords(pageIndex);
      }
    }
  
    fetchRecords(pageIndex) {
      ...
    }
  
   changePage(pageIndex) {
     console.log("change page selected: "+pageIndex);
     this.setState({pageIndex: pageIndex});
     this.fetchRecords(pageIndex);
   }
  
  render() {
    var content = (
        &lt;RecordList
          records={this.state.records}
          pageSize={this.state.pageSize}
          pageIndex={this.state.pageIndex}
          changePage={(pageIndex) =&gt; this.changePage(pageIndex)}
          /&gt;
      )
    return (
      &lt;div className="App"&gt;
        ...
        {content}
      &lt;/div&gt;
    );
  }
  </code></pre>