Events & function

  • 1. Step

    1. Normal function in functional components

    
    
                  function ActionLink() {  
                    function handleClick(e) {  
                        e.preventDefault();  
                        console.log('You had clicked a Link.');  
                    }  
                    return (  
                        <a href="#" onClick={handleClick}>  
                              Click_Me  
                        </a>  
                    );  
                }  
    
                

    2. Member function in class

    
    
                class TestApp extends Component {
                    clickHandler() {
                        console.log(“clicked”)
                    }
                    render() {
                        return (
                            <div>
                                <button onClick={this.clickHandler}>Click me </button>
                            </div>
                        )
                    }
                }
    
                

    3. passing parameter to the function

    
    
                const App = () => {
                  const handleClick = (name: string) => {
                    alert(`Hello, ${name}!`);
                  };
    
                  return (
                    <div>
                      <button onClick={() => handleClick('Manoj')}>Greet Manoj</button>
                      <button onClick={() => handleClick('Vijay')}>Greet Vijay</button>
                    </div>
                  );
                };