I'm having a problem with inputs ... I have two inputs: the first has autofocus and the other does not. However, whenever I type in the second input, it loses focus and focus returns to the first input.
I read that React will render the component again whenever I type something. I tried putting keys and etc, but nothing worked
In my form (component called Signup), I have the following:
import React from 'react'
import Input from '../../components/Input'
import styles from './styles.scss'
class Signup extends React.Component {
constructor (props) {
super(props)
this.state = {
name: '',
email: '',
}
}
onSignup (e, userData) {
e.preventDefault()
this.props.onSignup(userData)
}
render () {
return (
<main className={styles.wrapper}>
<div className={styles.formSide}>
<h1>CADASTRAR</h1>
<Input
id="name"
label="Nome"
onChange={e => this.setState({ name: e.target.value })}
autofocus={true}
/>
<Input
id="email"
label="E-mail"
onChange={e => this.setState({ email: e.target.value })}
/>
</div>
</main>
)
}
}
Signup.propTypes = {
onSignup: React.PropTypes.func.isRequired
}
export default Signup
My component Input is as follows:
import React, { PropTypes } from 'react'
import MaskedInput from 'react-maskedinput'
import styles from './styles.scss'
function Input (props) {
let iconComp
if (props.icon) {
iconComp = (<img src={props.icon} alt="Icon" />)
}
let input = ''
if (props.type === 'date') {
input = (
<MaskedInput
ref={inp => inp && props.autofocus && inp.focus()}
onChange={props.onChange}
mask="11/11/1111"
placeholder={props.placeholder}
className={styles.input}
/>
)
} else {
input = (
<input
ref={inp => inp && props.autofocus && inp.focus()}
onChange={props.onChange}
id={props.id}
placeholder={props.placeholder}
type={props.type}
className={styles.input}
/>
)
}
return (
<div className={styles.wrapper}>
<label htmlFor={props.id} className={styles.label}>{props.label}</label>
<br />
{input}
{props.error &&
<span className={styles.error}>
{props.errorMessage}
</span>
}
{iconComp}
</div>
)
}
Input.propTypes = {
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
icon: PropTypes.string,
placeholder: PropTypes.string,
type: PropTypes.string,
autofocus: PropTypes.bool,
onChange: PropTypes.func.isRequired,
error: PropTypes.bool,
errorMessage: PropTypes.string
}
Input.defaultProps = {
icon: '',
placeholder: '',
type: 'text',
autofocus: false,
error: false,
errorMessage: ''
}
export default Input
How do I solve this problem?