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（）。 Flux模式是安排这种方式的可能方式之一。

所以这让我想到将Link标签放在各自的标签内，给它们一种{{display：＆＃39; none＆＃39;}}样式，点击单选按钮触发一个单击相应的链接标记。这将确保所有相同的功能发生在我们对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

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

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

为此，我需要以下内容：

在点击事件上推送到browserHistory以更新路线
将'active'css类链接到当前视图/ URL（我通过组件状态完成此操作）
每当更改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

React-Router Link，如何从另一个组件

1 个答案: