Pass event and arguments onChange in input in React

Question

I have a component as below:

import React from 'react';

import MyComponent from '../utils/MyComponent';


export default class BasicList extends MyComponent {

    constructor(props) {
        let custom_methods = [
            'renderItemOrEditField', 'toggleEditing', 'moveCaretAtEnd',
            'editItem'
        ];
        super(props, custom_methods);
        this.state = {
            editing: null,
            current_text: ''
        };
    }

    // moveCaretAtEnd(e) {
    //     var temp_value = e.target.value
    //     e.target.value = ''
    //     e.target.value = temp_value
    // }

    editItem(event) {
        let current_value = event.target.value;
        alert(current_value + this.state.editing);
    }

    renderItemOrEditField(item) {
        console.log(item);
        if (this.state.editing === item.id) {
            return (
                <input
                  onKeyDown={ this.handleEditField }
                  type="text"
                  className="form-control"
                  ref={ `${item.type}_name_${ item.id }` }
                  name="title"
                  autofocus
                  onFocus={this.moveCaretAtEnd}
                  defaultValue={ item.name }
                  onChange={() => this.editItem(event)}
                />
            );
        } else {
            return (
                <li
                  onClick={this.toggleEditing.bind(null, item.id)}
                  key={item.id}
                  className="list-group-item">
                    {item.name}
                </li>
            );
        }
    }

    toggleEditing(item_id) {
        this.setState({editing: item_id});
    }


    render() {
        let li_elements = null;
        let items = this.props.items;

        if (items.length > 0) {
          li_elements = items.map((item) => {
              return (
                  this.renderItemOrEditField(item)
                //   {/* }<li key={item.id}>
                //       {item.name} -
                //       <button onClick={() => {this.props.deleteCallback(this.props.item_type, item.id, item.name)} }>
                //         Delete
                //       </button>
                //   </li> */}

              );
          });
        }

        return (
          <div>
            <h4>{this.props.title}:</h4>
                <ul className="list-group">
                    {li_elements}
                </ul>
          </div>
        );
    }
}

I want to be able to make an API call when the user edits the name of an item. To do this, I need access to the new name, the type of item it is, and the ID of the item we're editing. I am having problems getting the correct data to an onChange handler in React. In editItem, this is coming in as undefined.

Trying

onChange={() => this.editItem}

has no errors, but does nothing.

Trying

onChange={() => this.editItem()}

yields Uncaught TypeError: Cannot read property 'target' of undefined

How can I have access to this.state and also the event object in this editItem onChange?

Mayank Shukla · Accepted Answer · 2017-06-05 20:08:35Z

5

Because you are not passing the event object, write it like this:

onChange={(event) => this.editItem(event)}

answered Jun 5, 2017 at 20:08

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roman Romanovsky · Accepted Answer · 2017-06-05 20:08:33Z

1

onChange={() => this.editItem()} is not working because you forgot to bind it with your component:

constructor(props){
   ...
   this.editItem = this.editItem.bind(this);
   ...
}

answered Jun 5, 2017 at 20:08

Roman Romanovsky

5785 silver badges9 bronze badges

1 Comment

codyc4321 Over a year ago

I bound it in super(props, custom_methods);

Collectives™ on Stack Overflow

Pass event and arguments onChange in input in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related