Tengo esta aplicación simple de reacción js en la que simplemente estoy convirtiendo el texto de arriba a abajo usando useState. Pero este texto está en mayúsculas en la misma área de texto, quiero mostrar el texto en mayúsculas en otra área de texto. y deje el texto en minúsculas en la misma área. Aquí está mi código:
import React from 'react' import { useState } from 'react' function TextArea(props) { const handleUpperClick= () => { let newText = text.toUpperCase(); setText(newText) } const handleOnChange= (event) => { setText(event.target.value); console.log(event.target.value); } const [text, setText] = useState("Enter the text here please!"); return ( <div> <h1>{props.heading}</h1> <div className="mb-3"> <label htmlFor="myBox" className="form-label">Example Text Area</label> <textarea name="" id="myBox" value={text} onChange={handleOnChange} cols="30" rows="10" className="form-control"></textarea> </div> <button className="btn btn-primary" onClick={handleUpperClick}> Convert to Upper Case </button> <div className="mb-3"> <label htmlFor="myBox" className="form-label">Capital</label> <textarea name="" id="myBox" cols="30" rows="10" className="form-control"></textarea> </div> </div> ) } export default TextAreaPor favor, ayúdame con este enfoque.
Puede usar useRef aquí como:
<textarea name='' id='myBox' cols='30' rows='10' ref={capitalCaseTextArea} className='form-control' ></textarea>; y declarar capitalCaseTextArea como:
const capitalCaseTextArea = useRef(null); y al hacer clic en el botón puede establecer el valor del área de textarea como:
const handleUpperClick = () => { let newText = text.toUpperCase(); // setText(newText); capitalCaseTextArea.current.value = newText; };