0
216
ViewsCómo tomar automáticamente una '/' (barra oblicua) en el campo de entrada usando reactJS
¿Cómo puedo formatear una entrada para colocar una barra antes del valor que ingresa el usuario, de modo que el usuario no pueda eliminarla porque ya está formateada de esa manera? Estoy tratando de agregar funcionalidad a los campos de entrada / caracteres para que cuando los usuarios ingresen dígitos, las barras "/" se agreguen automáticamente antes.
Soy nuevo en React, así que no tengo idea de cómo puedo resolver eso, por favor ayúdenme.
Un ejemplo del resultado que quiero resolver
mascaraUserName = (text) => { const selectedData_ = this.state.form; formated = text; if(formated.length==1){ //formated = text +'/'; if(selectedData_.userName.indexOf('/') == -1){ formated = text +'/'; } } console.log(formated); // this.setState({ form: myRef }); } <Col xs={24} sm={24} md={24} lg={24}> <FormItem {...formItemLayout} label={intl.formatMessage({ id: `maintenace.link.userName` })}> {getFieldDecorator(`disable`, { initialValue: "https://" ? "https://" : "" })(<Input style={{ color: "#3e3e3ed9"}} disabled="disabled"/>)} {getFieldDecorator(`userName`, { initialValue: selectedData_.userName ? selectedData_.userName : "" })(<Input className="inputLink" name="userName" ref={this.myRef} onChange={this.mascaraUserName} placeholder={intl.formatMessage({ id: `maintenace.link.nicknameIntructions` })} />)} </FormItem> </Col>1 answers
Answer question0
Puede controlar la entrada y luego interceptar cualquier cambio que intente eliminar el "/" inicial:
import React, { useState } from "react"; export default function App() { const [link, setLink] = useState("/"); return ( <input value={link} onChange={(e) => { const value = e.target.value; if (!value.startsWith("/")) e.preventDefault(); else setLink(value); }} /> ); }Editar : no me di cuenta de que esto era reaccionar nativo (no está etiquetado como tal), pero dejaré mi respuesta aquí, ya que probablemente aún puedas usar la lógica para lograr lo que quieres.