Hola chicos, he usado material UI y reacciono para crear un formulario. Me gustaría usar la propiedad de enfoque en una referencia particular. Por favor, encuentre a continuación el código de referencia: -

Usando createRef para inicializar la referencia. El siguiente es el código para el constructor: -

 constructor(props) { super(props); this.state = { gender: '', empType: '', firstName: '', lastName: '', email: '', officePincode: '', dob: '', mobile: '', monthlySalary: '', residentialPincode: '', panNumber: '' }; this.firstNameRef = React.createRef(); this.lastNameRef = React.createRef(); this.dobRef = React.createRef(); this.emailRef = React.createRef(); this.monthlySalaryRef = React.createRef(); this.officePincodeRef = React.createRef(); this.residentialPincodeRef = React.createRef(); this.panNumberRef = React.createRef();

}

Estoy usando esta matriz en el método de renderizado: -

 const focusArray = [ this.firstNameRef, this.lastNameRef, this.dobRef, this.emailRef, this.monthlySalaryRef, this.officePincodeRef, this.residentialPincodeRef, this.panNumberRef ]; // eslint-disable-next-line no-plusplus for (let index = 0; index < focusArray.length; index++) { const currentRef = focusArray[index]; if (currentRef.current) { if (currentRef.current.value === '') { currentRef.current.focus(); break; } } }

Encuentre el siguiente código para el campo de texto: -

 <TextField id="firstName" name="firstName" ref={this.firstNameRef} value={firstName} disabled={ firstName && disableNameField.has(params.get('utm_source')) } label="First Name" error={formSubmitted && !validateName(firstName)} onChange={this.handleChange()} variant="outlined" margin="normal" helperText={ formSubmitted && !validateName(firstName) ? '*Please enter first name' : '' } className={classes.input_field} InputLabelProps={{ classes: { root: classes.cssLabel, focused: classes.cssFocused } }} InputProps={{ classes: { root: classes.cssOutlinedInput, focused: classes.cssFocused, notchedOutline: firstName ? classes.noOutline : classes.notchedOutline } }} />

Estoy usando un componente de reacción basado en clases. Cualquier ayuda o sugerencia es apreciada.