How to attach event listener to multiple elements in React (not in-line)?

Question

Instead of having to attach event listener to each element, how can you add event listeners to a group? Consider having multiple input elements. Instead of repeating onChange={this.handleChange} how can I just attach this function to onChange for all input elements?

Something that with vanilla JS was as easy as selecting all inputs, looping and attaching.

render() {
    return (
        <form>
            <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />
            <br />
            <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />
            <h1>{this.state.firstName} {this.state.lastName}</h1>
        </form>
    )
}

0xc14m1z · Accepted Answer · 2019-01-08 16:47:08Z

1

You could create a dedicated on-the-fly component, something like:

render() {
    const Input = props =>
      <input onChange={ this.handleChange } { ...props } />

    return (
        <form>
            <Input type="text" name="firstName" placeholder="First Name" />
            <br />
            <Input type="text" name="lastName" placeholder="Last Name" />
            <h1>{this.state.firstName} {this.state.lastName}</h1>
        </form>
    )
}

answered Jan 8, 2019 at 16:47

0xc14m1z

3,7252 gold badges16 silver badges24 bronze badges

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

2 Comments

Dom Over a year ago

It works, thanks you. But I am guessing there is no 'vanila js' way of selecting, looping and attaching?

0xc14m1z Over a year ago

Nope, this is the React way, it's declarative :)

Bruno Anken · Accepted Answer · 2019-01-08 16:49:17Z

0

You could try making your elements that must be subscribed (such as the inputs in your code example) into components, creating an array object with them and .map over it, passing your handleChange function to them.

answered Jan 8, 2019 at 16:49

Bruno Anken

352 silver badges7 bronze badges

Collectives™ on Stack Overflow

How to attach event listener to multiple elements in React (not in-line)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related