javascript - 如何区分点击处理程序？

Question

我有一个导航类组件，我想在单击“关于”或“联系人”后在其中使用模态。 我使用更改状态然后打开模式的事件处理程序，但我不知道如何区分“关于”和“联系”之间的点击以打开不同的模式。有帮助吗？

class Navbar extends Component {
    state = {
        clicked: false
    }

    clickHandler = (event) => {
        event.preventDefault();
        //console.log('clicked!');
        this.setState({clicked: true});   
    }

    render () {
        const aboutClick = (<a href='/' onClick={this.clickHandler}>About</a>);
        const contactClick = (<a href='/' onClick={this.clickHandler}>Contact</a>);
        
        const modalAbout = (<Modal show={this.state.clicked}><About /></Modal>);
        const modalContact = (<Modal show={this.state.clicked}><Contact /></Modal>);

        const modal = aboutClick ? modalAbout : modalContact;

        return (
            <div>
                {modal}      
                <ul className='Navbar'>
                    <li>{aboutClick}</li>
                    <li>{contactClick}</li>
                    <li><NavLink to={'/admin'}>Admin</NavLink></li>
                </ul>
            </div>
        );
    }        
}   
export default Navbar;

Answer 1

您可以柯里化(Currying)一个消除歧义的值。

clickHandler = (value) => (event) => {
  event.preventDefault();

  if (value === 'about') {
    // do about stuff
  }
  if (value === 'contact') {
    // do contact stuff
  }       

  this.setState({clicked: true});   
}

...

const aboutClick = (<a href='/' onClick={this.clickHandler('about')}>About</a>);
const contactClick = (<a href='/' onClick={this.clickHandler('contact')}>Contact</a>);