react事件传值

hss

发布于 2022-02-25 19:39:06

49900

代码可运行

文章被收录于专栏：前端卡卡西前端卡卡西

运行总次数：0

代码可运行

React

父子组件传值

写法一：bind绑定this

class XiaojiejieItem extends Component {
    render() {
        return (
            <li onClick={this.delItem.bind(this)}>{this.props.list}</li>
        );
    }
    delItem() {
        console.log(this.props.index)
    }
}

写法二：构造函数

class XiaojiejieItem extends Component {
    constructor(props){
        super(props)
        this.delItem = this.delItem.bind(this)

    }
    render() {
        return (
            <li onClick={this.delItem}>{this.props.list}</li>
        );
    }
    delItem(){
        console.log(this.props.index)
    }
}

写法三：箭头函数

class XiaojiejieItem extends Component {
    render() {
        return (
            <li onClick={this.delItem}>{this.props.list}</li>
        );
    }
    delItem = () => {
        console.log(this.props.index)
    }
}

onClick点击事件传参

写法一：bind绑定

{this.state.list.map((item, index) => {
    return (
        <li key={index} onClick={this.delItem.bind(this, index)}>
            {item}
        </li>
    )
})}

delItem(e,index) {
    console.log(e,index)
}

写法二：箭头函数

{this.state.list.map((item, index) => {
    return (
        <li key={index} onClick={() => { this.delItem(index) }}>
            {item}
        </li>
    )
})}

delItem(index) {
    console.log(index)
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/10/14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

bind