Soy un ingeniero musical que crea un sitio web personal usando reaccionar. Estoy tratando de hacer un formulario de contacto donde la persona escribe un asunto en un campo de entrada, un mensaje en un área de texto, luego presiona un botón de "contacto" y su cliente de correo se abre con el asunto y el cuerpo del correo electrónico completado con el contenido del campo de entrada y el área de texto respectivamente. El problema es que parece que no puedo pasar datos de mis referencias de reacción a la función window.open... el correo electrónico aparece con el asunto que dice "asunto" y el cuerpo que dice "cuerpo". El código relevante sigue, cualquier ayuda sería muy apreciada
import React, { useRef } from 'react'; import './index.css'; import * as parts from './UIComponents.js' const subjectRef = useRef(null); const messageRef = useRef(null); export class Email extends React.Component { goButton(i) { return(<parts.ButtonFactory onClick={() => this.go()} value={i} />); } go() { let subject = subjectRef.current.value; let body = messageRef.current.value; window.open('mailto:mixedbyinstinct@gmail.com?subject=subject&body=body'); } render() { return ( <div className="email-form"> <div className="container"> <div className="input-group"> <label>Your Name:</label> <input type="text" ref={subjectRef} /> <br /> <label>Detailed Message:</label> <textarea rows="8" ref={messageRef} /> </div> <div className="btn-group"> {this.goButton('REACH OUT')} </div> </div> </div> ); } }El problema es que su función go está pasando "cuerpo" y "sujeto" como cadena y no como variables. Es por eso que su cliente de correo está abierto con tales valores.
Si desea pasar variables, puede usar plantillas de cadena
go() { let subject = subjectRef.current.value; let body = messageRef.current.value; window.open(`mailto:mixedbyinstinct@gmail.com?subject=${subject}&body=${body}`); }