Estou tendo um probleminha com inputs... eu tenho dois inputs: o primeiro tem autofocus e o outro não. Porém, sempre que eu digito no segundo input, ele perde o foco e o foco volta pro primeiro input.
Eu li que React vai renderizar novamente o component sempre que digito algo. Eu tentei colocar keys e etc, mas nada funcionou
No meu form (component chamado Signup), eu tenho o seguinte:
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
Já meu component Input é o seguinte:
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
Como resolver esse problema?
Input
e outro com letra pequenainput
? e onde está o elemento<input>
? podes clarificar melhor a estrutura de componentes?