ReactJS onChange inputfield while typing?

Question

I want to execute a additional function in ReactJS onChange in input type text field, then render function is:

render(){
    return (
        <div>
            <InputText />
        </div>
    )
}

The InputText component is:

class InputText extends React.Component {

    onChange(e){
        console.log("you typed again...");
    }

    render() {
        return (
            <input type="text" placeholder="search..." onChange={this.onChange()} />
        );
    }
}

The console log is to execute while user is typing but with my method the console log comes only if page is loaded.

What I have to fix there to get it runing if user start with typing?

onChange={this.onChange}, without ()

Oen44
– Oen44

2017-05-25 09:09:53 +00:00
Commented May 25, 2017 at 9:09 — Oen44
– Oen44, Commented May 25, 2017 at 9:09

Brett DeWoody · Accepted Answer · 2017-05-25 09:11:13Z

1

Instead of calling the function within the onChange prop, like:

onChange={this.onChange()}

you only need to pass the function, like:

onChange={this.onChange}

answered May 25, 2017 at 9:11

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

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

Comments

Oen44 · Accepted Answer · 2017-05-25 09:10:45Z

0

Remove () from this.onChange(). That's all.

answered May 25, 2017 at 9:10

Oen44

3,2461 gold badge24 silver badges32 bronze badges

Collectives™ on Stack Overflow

ReactJS onChange inputfield while typing?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related