CODEWITHSUNDEEP
javascriptreactjs
Pubudu Jayasanka
Pubudu Jayasanka

Reputation: 1462

e.target.value in button returns undefined sometimes. Why this happens?

I have defined four buttons and those buttons will call same method in onClick event.

Method

   changeFilterForButtons(e){
    let filter = e.target.value;
    console.log("----------------------------"  + filter);
    this.props.handleData(filter);
    this.props.filterData();
}

Render()

 render() {
    return (
        <div className='audit-menu' style={{backgroundColor: '#fff'}}>
            <div className='row align-items-center'>
                <div className="col text-left ml-2 font-weight-bold">
                    Invoice audit
                </div>
                <div className="col-6 ">
                    <div class="btn-group btn-group w-100">
                        <button class="w-25 btn menu-btn" value='inbox' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-upload pr-3">
                        </i>Inbox
                        </button>
                        <button class="w-25 btn menu-btn" value='rejected'  onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Rejected
                        </button>
                        <button class="w-25 btn menu-btn" value='accepted' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Accepted
                        </button>
                        <button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3">
                        </i>Archive
                        </button>
                    </div>
                    ​
                </div>
                <div className="col">
                    <li className="nav-item dropdown d-none d-lg-block">
                        <a aria-expanded="true" className="nav-link dropdown-toggle select-company-dropdown"
                           data-toggle="dropdown" href="#" id="selectLanguage">Select company</a>
                    </li>
                </div>
            </div>
        </div>
    );
}

When buttons are clicked most of the times e.target.value is taken by above function. But sometimes it returns undefined. Why this is happening ?. Console.log output is added below.

enter image description here

Upvotes: 2

Views: 1867

Answers (3)

Marvin Daniel Cely Baez
Marvin Daniel Cely Baez

Reputation: 1

I had the same trouble. When I read the second comment I saw where to find the solution.

CSS solution:

button > * {
  pointer-events: none;
}

Source

Upvotes: -1

Pubudu Jayasanka
Pubudu Jayasanka

Reputation: 1462

First I must say that both below answers are correct. My error occurred because of it's icon. 

<button class="w-25 btn menu-btn" value='archive' onClick={this.changeFilterForButtons.bind(this)}><i className="icon-search pr-3"</i>Archive</button>

When i accidentally click the icon, it will return undefined because it doesn't have any value to return.

Upvotes: 4

Wicak
Wicak

Reputation: 409

try with 

this.changeFilterForButtons

instead of 

this.changeFilterForButtons.bind(this)

or in constructor :

constructor( props ){
    super( props );
    this.changeFilterForButtons = this.changeFilterForButtons.bind(this);
}

you can look this article to more information about bind, this

This is why we need to bind event

Upvotes: 1

Related Questions