React 函数式组件的点击事件（代码中附类组件的点击事件）

在函数组件中根据onClick里调用的函数的写法不同，onClick={}里有多种调用方式。

第一种函数：

    function jump(url,event) {
        goToPage(url);
    }

当onClick={}里调用这个函数时，有两种写法：

（1）方法名.bind(this,参数)

<table onClick={jump.bind(this,goods.link)}>

如果直接用方法名(参数)调用的话，打开页面，该方法自动执行。

<table onClick={jump(goods.link)}>此种方法不用点击，直接执行。

（2）(event)=>方法名(参数,event)

<table onClick={(event)=>jump(goods.link,event)}>

第二种函数：

    const jumpOut = (param)=>{
        return (event)=>{
            goToPage(param);
        };
    };

直接调用：

<table onClick={jumpOut(goods.link)}>

当用<table onClick={jumpOut.bind(this,goods.link)}>调用时，点击没有反应。

综合代码：

import React, {Component} from 'react';
import './index.less';

function WaringBanner(props) {
    if (!props.warn) {
        return null;
    }
    return (
        <div className="warning">
            警告！
        </div>
    );
}
function GoodsList(props) {
    const goodsData = props.goodsList;
    // 没有return时，代码只能写在一行
    const listItems = goodsData.map((goods) =>
        <li key={goods.toString()}><img src={goods.imgUrl} style={{width: '100px', height: '100px', margin: '10px'}}></img></li>
    );
    function jump(url,event) {
        goToPage(url);
    }
    //可直接调用
    const jumpOut = (param)=>{
        return (event)=>{
            goToPage(param);
        };
    };
    
    // 有大括号和return的，代码必须写在（）中，可多行
    const listItems1 = goodsData.map((goods) => {
        return (<li key={goods.toString()} className="liGoodsStyle">
            {/*第一种函数：jump.bind*/}
            {/*<table onClick={jump.bind(this,goods.link)}>*/}
            {/*第一种函数：event箭头函数*/}
            {/*<table onClick={(event)=>jump(goods.link,event)}>*/}
            {/*第二种函数直接调用*/}
            <table onClick={jumpOut(goods.link)}>
                <tr>
                    <td>
                        <img src={goods.imgUrl} style={{width: '100%', height: '150px'}}></img>
                    </td>
                </tr>
                <tr>
                    <td className="tdHeightStyle">
                        {goods.name}
                    </td>
                </tr>
            </table>

        </li>);
    }
    );

    return (
        <div style={{width: '100%'}} >
            <ul style={{margin: '0px 15px 0px 15px',padding: '0px 10px 0px 10px'}} className="divStyle">{listItems1}</ul>
        </div>
    );
}
export default class Hidden extends Component{
    constructor(props) {
        super(props);
        this.state = {showWarning: false};
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }

    handleToggleClick() {
        this.setState(prevState => ({
            showWarning: !prevState.showWarning
        }));
    }

    render() {
        const {goodsList} = this.props;
        const goodsData = this.props.goodsList;
        // var result = [{imgUrl: 'sdfsd',score: 10},{imgUrl: 'ffff',score: 15}];
        return (
            <div className="hiddenBg">
                <WaringBanner warn={this.state.showWarning}/>
                <button onClick={this.handleToggleClick}>{this.state.showWarning?'隐藏':'显示'}1111</button>
                <button onClick={event => this.handleToggleClick(event)}>{this.state.showWarning?'隐藏':'显示'}1111</button>
                <div className="hiddenBg"><GoodsList goodsList={goodsList}/></div>
            </div>
        );
    }
}

跳转到外链的方法：

    function jump(url,event) {
        //跳转外链并打开新窗口
        // 方法一
        window.open(url);
        // 方法二
        // const w=window.open('about:blank');
        // w.location.href=url;
        // 方法三
        // let win = window.open(url, '_blank');
        // win.focus();
        // 方法四
        // window.location.href = url;
    }