How to passing the parameter to event handle in reactjs

kn3l

I have created a component

import React, { Component } from 'react'
import AppStep from '../common/AppStep'
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

class Step2 extends Component {
    constructor(props) {
        super(props);
        this.togglePhoto = this.togglePhoto.bind(this);
        this.selectPhoto = this.selectPhoto.bind(this);

        this.toggleDoc = this.toggleDoc.bind(this);
        this.selectDoc = this.selectDoc.bind(this);


        this.state = {
          dropdownOpenDoc: false,
          dropdownOpenPhoto: false,
          valueDoc : "រូប​ថត",
          valuePhoto : "រូប​ថត"
        };


      }



    toggleDoc(event) {
        console.log(event.target.innerText)
        this.setState({
          dropdownOpenDoc: !this.state.dropdownOpenDoc
        });
      }
      selectDoc(event) {
          //console.log(event.target.innerText)
        this.setState({
          dropdownOpenDoc: !this.state.dropdownOpenDoc,
          valueDoc: event.target.innerText
        });

    }
    togglePhoto(event) {
        console.log(event.target.innerText)
        this.setState({
            dropdownOpenPhoto: !this.state.dropdownOpenPhoto
        });
      }
    selectPhoto(event) {
        //console.log(event.target.innerText)
      this.setState({
        dropdownOpenPhoto: !this.state.dropdownOpenDocPhoto,
        valuePhoto: event.target.innerText
      });

  }
    renderForm() {
        return (

            <form className="needs-validation"  name="loan-info" noValidate method="POST" action="/">
              <hr className="mb-4"/>

              <div className="row">
                  <div className="col-md-6 mb-3">            
                    <div className="btn-group">

                        <ButtonDropdown isOpen={this.state.dropdownOpenPhoto} toggle={this.togglePhoto}>
                                <DropdownToggle caret>{this.state.valuePhoto}</DropdownToggle>
                                <DropdownMenu>
                                        <DropdownItem onClick={this.selectPhoto}>ថត​ថ្មីពី​កាមេរា</DropdownItem>
                                        <DropdownItem onClick={this.selectPhoto}>ដាក់​រូប​ដែល​មាន​ស្រាប់</DropdownItem>
                                </DropdownMenu>
                        </ButtonDropdown>

                    </div>
                    <div id="photo-placholder">
                        <img className="img-placeholder-photo"  src="holder.js/312x225"/>

                        <div className="custom-camera" id="camera-photo">
                          <img className="img-placeholder" src="img/kanel.png"/>
                        </div>

                        <div className="custom-file" id="upload-photo" >
                          <input type="file" className="custom-file-input" id="photo-input-file" aria-describedby="fileHelp" required />
                          <label className="custom-file-label" htmlFor="photo-input-file">
                              ជ្រើសរូបថត​អ្នក
                          </label>
                          <div className="invalid-feedback">
                              អ្នក​ចាំបាច់​បំពេញ ជ្រើសរូបថត
                          </div>
                        </div>

                    </div>
                  </div>

                  <div className="col-md-6 mb-3">            
                    <div className="btn-group">
                    {/* Render another dropdown list */}

                    <ButtonDropdown isOpen={this.state.dropdownOpenDoc} toggle={this.toggleDoc}>
                                <DropdownToggle caret>{this.state.valueDoc}</DropdownToggle>
                                <DropdownMenu>
                                        <DropdownItem onClick={this.selectDoc}>ថត​ថ្មីពី​កាមេរា</DropdownItem>
                                        <DropdownItem onClick={this.selectDoc}>ដាក់​រូប​ដែល​មាន​ស្រាប់</DropdownItem>
                                </DropdownMenu>
                        </ButtonDropdown>

                    </div>

I want to add more dropdown list which has difference display,I don't want to copy the same functions , anyone could guide how can just pass the params and handle its output.

Thanks

Tyler

Assuming I am correct at this comment, I believe you can solve your problem with event.currentTarget. This is a vanilla javascript thing, here is the documentation.

Essentially, event.currentTarget always refers to the exact element that raised the event. So it will always refer to the specific dropdownlist that raised your toggle event.

Note, do NOT confuse event.target with event.currentTarget. event.target has varying results; because, the element it can refer to can change due to things like event bubbling.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to handle onKeyDown event on div in ReactJS

Passing a parameter to an event handler in the parent class from a child class ReactJS

Handle onKeyPress event in ReactJS

Reactjs How to pass parameter in onclick event in jsx

How to pass parameter to a function on onClick event in ReactJS

Passing parameter in ReactJS onclick

passing parameter for event listener

Passing a parameter into an event handler

Passing Event handler as parameter

How can i get host application handle in dll project with Delphi without passing handle parameter

Passing an additional parameter with an onChange event

Passing parameter to onchange event in Rails

Passing a function as a parameter that will be an onClick event

Passing custom EventArgs as parameter of event

Passing a function with parameter to event handler

How to correctly call an event handler function in a parent component with a parameter in ReactJS?

Reactjs - passing a click event up to parent

Passing arguments to event handlers and getting the value in ReactJS?

ReactJS PreventDefault when already passing parameter

How to simplfy the passing of parameter

how to passing a argument to this parameter?

Handle Event and define parameter after event parameter in javascript

onClick event fires infinite when passing a parameter

Gtag Event Parameter not passing complete data

Javascript - onClick event passing same parameter to function

Passing a delegate/event as a ref generic parameter

Passing event parameter when clicking a div in React

Passing additional parameter through Event Listener

How to use a parameter in ReactJS