Question

我正在通过道具传递方法

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，则不会发生异常行为

Answer 1

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

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

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

为什么在不应该通过（property）的情况下也使用通过props传递的方法

1 个答案: