React-Router Link，如何从另一个组件触发 Link 上的点击事件

Question

我正在尝试设置一系列 React-Router 以在某个组件内进行导航。我已将其设置为 link 标签可以正常工作，但我正在尝试将它们设置为如下所示：

样式设置如下：

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

当前的 Link 系列看起来像这样（没有样式）：

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

HTML（顶部）是用 HTML 编写的，不是 JSX，但这不是问题所在。我正在尝试将 Link 组件组合到上面的 HTML 中，以便选项将触发 link 标签的功能。

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

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

所以这让我想到了将 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

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

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

为此，我需要以下内容：

点击事件推送到 browserHistory 以更新路由
link 'active' css class 到当前 view/URL （我是通过组件状态完成的）
每当 url 更改时更新状态（在 window 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

React-Router Link，如何从另一个组件触发 Link 上的点击事件

React-Router Link, how to trigger a click event on a Link from another component

javascript

events

reactjs

react-jsx