React-Router Link,如何从另一个组件触发链接上的单击事件

Question

我正在尝试设置一系列React-Router以在某个组件中进行导航.我已将其设置为链接标记正常工作,但我正在尝试将它们设置为如下所示:

样式设置如下:

  <div className="btn-group" data-toggle="buttons">
      <label className="btn btn-primary-outline active">
        <input type="radio" name="options" id="option1" autocomplete="off" checked />Payments
      </label>
      <label className="btn btn-primary-outline">
        <input type="radio" name="options" id="option2" autocomplete="off" /> Bills
      </label>
      <label className="btn btn-primary-outline">
        <input type="radio" name="options" id="option3" autocomplete="off" /> Charge
      </label>
    </div>

目前的链接系列看起来像这样(没有样式):

<ul>
  <Link to='/options/option1'>option1</Link>
  <Link to='/options/option2'>option2</Link>
  <Link to='/options/option3'>option3</Link>
</ul>

HTML(顶部)是用HTML编写的,而不是JSX,但这不是问题.我正在尝试将链接组件组合到上面的HTML中,以便选项将触发链接标记的功能.

在React文档中我发现了这个:

对于没有父子关系的两个组件之间的通信,您可以设置自己的全局事件系统.订阅componentDidMount()中的事件,取消订阅componentWillUnmount(),并在收到事件时调用setState().通量模式是安排这种方式的可能方式之一.

所以这让我想到了将Link标签放在各自标签内,给它们一种{{display:'none'}}样式,点击单选按钮会触发相应Link标签的点击.这将确保我们期望从Link标签(推送到浏览器历史记录等)发生所有相同的功能.

但是,以下情况不起作用:

<label className="btn btn-primary-outline active" onClick={() => document.getElementById('linkToOption1').click() }>
    <Link to='/options/option1' id="linkToOption1" style={{display: 'none'}}>Option1</Link>
        <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />Option1
    </label>

在前面的示例中,您可以看到我创建了一个onClick事件处理程序,该处理程序选择Link标记的id并触发单击.

Answer 1

我能够解决我的问题，所以我发布了对我有用的内容。如果有更改或更好的解决方案，请回答或评论。

我无法触发链接上的点击事件，但我能够模拟我需要的方面。

为此，我需要以下内容：

1. 在点击事件上推送到 browserHistory 以更新路线
2. 将“活动”CSS 类链接到当前视图/URL（我通过组件状态完成此操作）
3. 每当 url 更改时更新状态（窗口 popstate 事件上的修改状态，并且还会更新将挂载的组件上的 currentView 状态）

这样，当单击选项卡、手动将 url 更改为特定路由以及使用浏览器后退/前进按钮时，就能突出显示正确的选项卡。

这是我的 navmenu 文件中的所有代码，它创建了一个非常酷的导航组件，并与 React-router 和 browserHistory 一起使用。

import React, { Component, PropTypes } from 'react'
import { Link, browserHistory } from 'react-router'

class Navmenu extends Component {
  constructor(props) {
    super(props)
    this.state = { currentView: '' }
    this.getClasses.bind(this)
  }

  // in case of url being manually set, figure out correct tab to highlight
  // add event listener to update the state whenever the back/forward buttons are used.
  componentWillMount() {
    this.changeLocation()
    window.addEventListener('popstate', this.changeLocation.bind(this))
  }

  componentWillUnmount() {
    window.removeEventListener('popstate', this.changeLocation.bind(this))
  }

  // update state based on the URL
  changeLocation() {
    const path = window.location.pathname.split('/')
    const currentView = path[path.length - 1]
    this.setState({ currentView })
  }

  // update state and update react-router route
  navigateToRoute(route) {
    this.setState({ currentView: route })
    browserHistory.push(`/options/${route}`)
  }

  // give correct tab the 'active' bootstrap class
  getClasses(link) {
    let classes = 'btn btn-primary-outline flex-button'
    if (this.state.currentView === link) {
      classes += ' active'
    }
    return classes
  }

  render() {
    return (
      <div className="btn-group flex-navbar" data-toggle="buttons">
        <label className={this.getClasses('option1')} onClick={() => this.navigateToRoute('option1')}>
          <input type="radio" name="options" id="option1" autoComplete="off" defaultChecked />option1
        </label>
        <label className={this.getClasses('option2')} onClick={() => this.navigateToRoute('option2')}>
          <input type="radio" name="options" id="option2" autoComplete="off" /> option2
        </label>
        <label className={this.getClasses('option3')} onClick={() => this.navigateToRoute('option3')}>
          <input type="radio" name="options" id="option2" autoComplete="off" /> option3
        </label>
      </div>
    )
  }
}

export default Navmenu