React点击事件 ,并传参

青旅半醒 2023-02-16 10:54 18阅读 0赞

constructor(props){
        super(props);
        this.state = {};
        this.checkMenu = this.checkMenu.bind(this);
    }
    
    clicked = (param)=>{ //点击传参
        return (event)=>{
            console.log(event.target.getAttribute("data-name"))//du 获取自定义属性值 推荐
            console.log(event.currentTarget.getAttribute("data-name"))//du获取自定义属性值 
            console.log(this.refs.test.getAttribute("data-name"));//du 获取自定义属性值
            console.log(event.target.value); //按钮 获取value的值
            console.log(param); // hello
        }
    }
    
    clicked2 = (param) => { //跳转传参
        this.props.history.push("/Index", {
             dotData: this.name
        });
    }
    
    
    delFolder = (params,e)=>{
    
    }
    
    render(){
        return (
            <React.Fragment>
                <button value="按钮" data-name="du" ref="test" onClick=    {this.clicked('hello')}>点击</button>
                <button onClick={(e)=>this.delFolder("abc",e)}>点击</button>
            </React.Fragment>
        )
    }

import React, {Component, Fragment} from 'react'
    import ReactDOM from 'react-dom'
    export default class Todo extends Component{
        constructor(props){
            super(props);
        }
        deleteTodo(id, event){
        	console.log(this);
        	console.log(event);
        	console.log(id);
        }
        render(){
            let id = 100;
            return (
                <div>
            	<p>This is a test.</p>
                	<input type="button" className="main-btn" value="Click Me!" onClick={(event)=>{this.deleteTodo(id, event)}} />
                </div>
            )
        }
    }
    ReactDOM.render(
    	<Todo />,
    	document.getElementById('root')
    )