Question

我试图在单击导航链接时将其添加到导航链接。

在JQuery中，我可以做类似的事情：

$('.navlink').on('click', function() {
    $("a").removeClass('active');
    $(this).toggleClass('active');
});

这是我设法进入React的壁橱：

export class NavLink extends Component {
constructor(props) {
    super(props);
    this.toggleClass=this.toggleClass.bind(this);
    this.state = {
      isActive: 1,
    }
  }

toggleClass = () => {
    this.setState({ isActive: this.props.id });
  }


render() {
    const { href, name, id } = this.props;
    const classNames = this.state.isActive === id ? "nav-link active" : "nav-link";

    return (
        <a 
        className={classNames} 
        onClick={this.toggleClass.bind(this)} href={href}>{name}</a>
      )
  }
}

问题在于，React只重新渲染点击的链接。因此，一旦为链接指定了活动类别，则单击其他链接后，该链接将不会被删除。

Answer 1

您需要在组件方面执行以下操作：

NavLinkList
|--NavLink
|--NavLink

NavLinkList就是将activeLinkId保持其状态的那个。

然后activeLinkId将以Link的形式传递给每个prop，因此，更改链接后，链接将重新呈现。

此外，在NavLinkList中，您将具有在activeLinkId的{{1}}处理程序上更改Link的功能。

Answer 2

我以前做过这样的事情。通过父组件更容易做到这一点。我没有每个链接的组件。我只是在渲染返回之前设置它们的类。这是我所做的代码示例，希望对您有所帮助。

我对onClick做了同样的事情，并且状态仅保留了一个selected，该状态保存了一个表示导航项名称的String。我有一个故事，评论和喜欢的导航链接。他们原来的班级只是'tab'。

render () {
   let storiesClass = 'tab';
   let commentsClass = 'tab';
   let likesClass = 'tab';
   if (this.state.selected === "Stories") {
     storiesClass += 'Selected';
     commentsClass = 'tab';
     likesClass = 'tab';
   } else if (this.state.selected === "Comments") {
     storiesClass = 'tab';
     commentsClass += 'Selected';
     likesClass = 'tab';
   } else {
     storiesClass = 'tab';
     commentsClass = 'tab';
     likesClass += 'Selected';
   }

   return (
       <button className={storiesClass} onClick={this.selectTab("Stories")}>...

反应：单击时将活动类添加到选定的导航链接

2 个答案: