时间戳

首页 > 解决方案 > 为什么在不应该（反应）时也使用通过道具传递的方法

reactjs - 为什么在不应该（反应）时也使用通过道具传递的方法

问题描述

我正在通过道具传递一个方法

export default class Layout extends Component {
  constructor(props){
    super(props)
    this.state = {
      className: 'container tray'
    }
  }
  handleClick(){
    this.setState({
      className: this.state.className === 'container' ? 'container tray' : 'container'
    })
  }
  render() {
     <Sidebar handleClick={this.handleClick.bind(this)} />
  }
}

然后我希望能够仅在单击一个元素时触发它

import React, { Component } from 'react'
import {Link} from 'gatsby'
export default class Sidebar extends Component {
  render() {
    return (
      <div className="sidebar">
        <div className="links">
            <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li onClick={this.props.handleClick} >tags</li>
            </ul>
        </div>
      </div>
    )
  }
}

当我点击tags它应该触发handleClick它，但它有时也会在我点击其他链接时被触发

（这是一个 gatsby 项目，这些链接转到不同的页面）

编辑：如果我删除Link异常行为不会发生

标签： reactjs

解决方案

在您的点击功能中，执行以下操作，看看这是否能解决您的问题。

handleClick(evt){
    evt.preventDefault()
    this.setState({
      className: this.state.className === 'container' ? 'container tray' : 'container'
    })
}

事件传播可能会导致某些事情发生。

推荐阅读