Tengo el siguiente código:
<div className='file-upload-wrapper' data-text='Select your file!'> <input type='file' id='upload' className='file-upload-field' placeholder='Enter Item Name' required onChange={(e) => setUpload(e.target.value)} onClick={changeUploadTxt} ></input> </div>El CSS para esto:
.file-upload-wrapper { position: relative; width: 400px; height: 40px; } .file-upload-wrapper::after { content: attr(data-text); font-size: 18px; position: absolute; top: 0; left: 0; background: #fff; padding: 10px 15px; display: block; width: calc(100% - 40px); pointer-events: none; z-index: 20; height: 40px; line-height: 40px; color: #999; border-radius: 5px 10px 10px 5px; font-weight: 300; } .file-upload-wrapper::before { content: "Upload"; position: absolute; top: 0; right: 0; display: inline-block; height: 60px; background: #4daf7c; color: #fff; font-weight: 700; z-index: 25; font-size: 16px; line-height: 40px; padding: 0 15px; text-transform: uppercase; pointer-events: none; border-radius: 0 5px 5px 0; } .file-upload-wrapper::hover { background: darken(#4daf7c, 40%); }Estaba tratando de hacer algo con esto, pero no funcionó:
const changeUploadTxt = () => { //const txtDiv = document.getElementsByClassName("file-upload-wrapper"); };También cambié el contenido de CSS con antes y después, pero no funcionó. ¿Conoce algún método para asegurarse de que los archivos se carguen y cambiar el texto dentro de la etiqueta div?
Así no es como funciona React. No piense en ello en términos de manipular directamente el DOM en un controlador de eventos. En su lugar, piénselo en términos de administrar el estado .
Entonces, al comienzo de su componente (asumiendo un componente de función, ya que ese es el enfoque preferido para el nuevo desarrollo en este momento) puede declarar un valor de estado:
const [uploadText, setUploadText] = useState('Select your file!');Entonces usarías ese valor en tu representación:
<div className='file-upload-wrapper' data-text={uploadText}>Ahora todo lo que tiene que hacer es actualizar el valor del estado cada vez que desee que cambie:
const changeUploadTxt = () => { setUploadText('Some new value'); };Cada vez que actualice el estado, eso activará el componente para que se vuelva a procesar. Esa es también la razón por la que no manipula directamente el DOM en React (a menos que realmente sepa lo que está haciendo bajo el capó en el marco), porque una nueva representación romperá cualquier cambio que haya realizado en el DOM.
puede usar innerHtml para agregar un texto.
const changeUploadTxt = () => { document.getElementsByClassName("file-upload-wrapper").innerHTML += "Upload"; };