CODEWITHSUNDEEP
reactjs
dropWizard
dropWizard

Reputation: 3538

ReactJs: Changing state inside an <input> tag

Normally to change a change in a text field I've done something like this:

<input type="text" onChange={this.handleFirst}/>

handleFirst: function(e){
        this.setState({
            first: e.target.value
        });
    },

But I have a few input fields and would like to avoid creating multiple handlers to manage a change in state.

Is there a way to do something like this?

<input type="text" onChange={this.setState({last:e.target.value})}/>

When I try that, I'm getting an error saying e is not defined (which I understand). Is there a way to access the value of input?

Upvotes: 1

Views: 45

Answers (1)

user5520186
user5520186

Reputation:

If you want to do it this way, you need to wrap it inside a function:

<input type="text" onChange={e => this.setState({ last: e.target.value })} />

The onChange event awaits a function to invoke, not a statement.

Upvotes: 2

Related Questions