import React from 'react'; const Dashboard = () => { const handleChange = () => { let input = document.querySelector('input'); let textarea = document.querySelector('textarea'); input.addEventListener('change', () => { let files = input.files; if (files.length === 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; const lines = file.split(/\r\n|\n/); console.log(lines); textarea.value = lines.join('\n'); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); }); } return ( <div style={{display: 'flex', }} > <input type="file" name="input" onChange={handleChange}/> <textarea cols={30} rows={20} style={{marginTop: 15, width:'50%'}} ></textarea> </div> ) }; export default Dashboard; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML 5 Boilerplate</title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="text/javascript"> const onFileChange = () => { let files = document.querySelector("#file-input").files; if (files.length === 0) return; const file = files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; const lines = file.split(/\r\n|\n/); console.log(lines); document.querySelector("textarea").value = lines.join('\n'); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); } </script> <form> <input type="file" name="input" id="file-input" onchange="onFileChange()" /> <textarea cols={30} rows={20} id="textarea"></textarea> </form> </body> </html>Al usar reaccionar, debe evitar el uso de selectores de consulta, ya que anulará el propósito de usar reaccionar. En su lugar, use estados para mantener los valores de textArea de modo que cada vez que haya una actualización de estado, se active la nueva representación. Puedes usar la implementación a continuación:
import React, { useState } from "react"; const Dashboard = () => { const [textValue, setTextValue] = useState(""); const handleChange = (e) => { const file = e.target.files[0]; let reader = new FileReader(); reader.onload = (e) => { const file = e.target.result; console.log(file); setTextValue(file); }; reader.onerror = (e) => alert(e.target.error.name); reader.readAsText(file); }; return ( <div style={{ display: "flex" }}> <input type="file" name="input" onChange={handleChange} /> <textarea cols={30} rows={20} value={textValue} onChange={setTextValue} style={{ marginTop: 15, width: "50%" }} ></textarea> </div> ); }; export default Dashboard;