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

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

第一种函数：

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

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

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

如果直接用方法名(参数)调用的话，打开页面，该方法自动执行。
此种方法不用点击，直接执行。
（2）(event)=>方法名(参数,event)
jump(goods.link,event)}>
第二种函数：
    const jumpOut = (param)=>{
        return (event)=>{
            goToPage(param);
        };
    };
直接调用：
当用
调用时，点击没有反应。
综合代码：
import React, {Component} from 'react';
import './index.less';

function WaringBanner(props) {
    if (!props.warn) {
        return null;
    }
    return (
        

            警告！
        
    );
}
function GoodsList(props) {
    const goodsData = props.goodsList;
    // 没有return时，代码只能写在一行
    const listItems = goodsData.map((goods) =>
        

    );
    function jump(url,event) {
        goToPage(url);
    }
    //可直接调用
    const jumpOut = (param)=>{
        return (event)=>{
            goToPage(param);
        };
    };
    
    // 有大括号和return的，代码必须写在（）中，可多行
    const listItems1 = goodsData.map((goods) => {
        return (

            {/*第一种函数：jump.bind*/}
            {/*
*/}
            {/*第一种函数：event箭头函数*/}
            {/*jump(goods.link,event)}>*/}
            {/*第二种函数直接调用*/}
            

                

                    

                        
                    
                
                

                    

                        {goods.name}
                    
                
            


        );
    }
    );

    return (
        

            
{listItems1}
        
    );
}
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 (
            

                
                {this.state.showWarning?'隐藏':'显示'}1111
                 this.handleToggleClick(event)}>{this.state.showWarning?'隐藏':'显示'}1111
                

            
        );
    }
}

跳转到外链的方法：

    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;
    }