0
157
VistasInterfaz de usuario de material: reconstrucción de la funcionalidad "Agregar personas" de TextField Google Docs
He estado jugando con Material UI, y estoy tratando de encontrar una manera de reproducir la funcionalidad en TextFields donde, después de que el usuario presiona el botón de espacio o de entrada, el texto de entrada tiene una burbuja a su alrededor.
Por ejemplo, en Hojas de cálculo de Google, cuando un usuario desea compartir un documento, puede ingresarlo en los correos electrónicos de esta manera: 
He estado tratando de jugar con el accesorio "InputProps" de TextFields, pero estoy luchando por descubrir cómo convertir el texto en un objeto en un espacio.
1 Respuestas
Responde la pregunta0
No estoy seguro de si esto es óptimo, pero podría diseñar una solución como esta:
2 componentes: 1 para la burbuja de correo. Este componente debe ser simple y directo. Imaginemos que lo nombra <Email> y tiene un accesorio de entrada llamado name
1 Para el campo de texto que maneja los cambios de valor y representa las burbujas de correo electrónico. Este componente puede hacer algo como esto:
const InputComponent = () => { const [children, setChildren] = useState([]); const [value, setValue] = useState(""); const change = (event) => { const newVal = event.target.value; if(newVal.includes(" ")){ setChildren([...children, <Email name={newVal.trim()}/>]}> setValue(""); return; } setValue(newVal); }; return ( <div> {children} <TextField onChange={change} value={value}/> </div> ); }Entonces, si el valor en TextField cambia, se verifica si contiene un espacio. Si es así, se crea un nuevo componente Bubble y se agrega a la matriz. Además, el valor se restablece para que el usuario pueda ingresar un nuevo correo electrónico.
Descargo de responsabilidad: acabo de escribir arriba como pseudocódigo, no espere que funcione cuando lo copie y pegue. Por favor, trate de entender lo que hice y bricolaje. Avísame si tuviste éxito :)