Tengo un cuadro de texto que contiene datos de una llamada API. Entonces el usuario puede editar este cuadro de texto.
Quiero obtener el texto editado para enviarlo de vuelta por llamada api. El valor siempre se envía vacío. ¿Alguien puede ayudarme en eso?
Componente hijo
export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) { const[textValue, setTextValue] = useState(ruleText) return ( <div> <textarea readOnly={readOnlyStatus} value={textValue} onChange={(e) => {setTextValue(e.target.value)}} /> </div> ) }Componente principal
const[editedRuleText, setEditedRuleText] = useState('') <RulesText ruleText={rules[1].substring(rules[1].indexOf(":") + 1)} readOnlyStatus={isEditing ? false : true} onChange={(val:string) => {setEditedRuleText(val); console.log('Val Now' + val)}}/>Ya tiene prop onChange del componente principal, pero no ha llamado a onChange prop en RulesText
El cambio podría ser
export default function RulesText({ruleText, readOnlyStatus, onChange}:{ruleText:string, readOnlyStatus:boolean, onChange:(val:string) => void}) { const[textValue, setTextValue] = useState(ruleText) return ( <div> <textarea readOnly={readOnlyStatus} value={textValue} onChange={(e) => { setTextValue(e.target.value) onChange(e.target.value) //pass value to the parent component }} /> </div> ) }