React.js loses focus with controlled input form
I'm trying to follow an example of handling multiple inputs: https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs
I tried to add two form elements: firstName and lastName. One is rendered in the main render () function, while the other is rendered using a separate JSX function called LastName ().
The result is available here: https://codepen.io/sagiba/pen/Kmdrdz?editors=0010
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2,
firstName: 'John',
lastName: 'Doe'
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
const LastName = () => {
return (
<label>
Last Name:
<input
name="lastName"
type="text"
value={this.state.lastName}
onChange={this.handleInputChange} />
</label>
);
};
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
<br />
<label>
First Name:
<input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleInputChange} />
</label>
<br />
<LastName />
</form>
);
}
}
ReactDOM.render(
<Reservation />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Both are displayed as expected. However, when trying to change the value of the last name, the component loses focus on every key press. This does not happen with firstName.
What am I doing wrong?
source to share
Reacts to reapplying the application every time a state change occurs. Because of this, it runs a function to recreate your last component; the function returns something "new" every time. Just remove it from the function and you are golden.
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
<br />
<label>
First Name:
<input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Last Name:
<input
name="lastName"
type="text"
value={this.state.lastName}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}
source to share