así que estoy creando un componente ReactJS para un formulario de contacto. Y ahora quiero crear un método que obtenga el valor de una entrada en el JSX, y luego quiero obtener el valor que devuelve ese método desde fuera del componente, en otro archivo. es posible?
Mi archivo de componentes:
//Inporting React. import React from 'react'; //Creating the contactForm Component class ContactForm extends React.Component{ render(){ return ( <form onSubmit={this.props.submit} className={this.props.formclass} id={this.props.formid}> <div className='inputDiv'> <input type="text" name="nameinput" placeholder="Name" id={this.props.nameinputid} className={this.props.nameinputclass} /> <input type="email" name="emailinput" placeholder="Email" id={this.props.emailinputid} className={this.props.emailinputclass} /> <br/> <input type="text" name="subjectinput" placeholder="Subject" id={this.props.subjectinputid} className={this.props.subjectinputclass} /> <br/> <input type="text" name="messageinput" placeholder="Message" id={this.props.messageinputid} className={this.props.messageinputclass} /> <br/> </div> <br/> <br/> <br/> <input type="submit" className={this.props.submitbtnclass} id={this.props.submitbtnid}/> </form> ) } } ContactForm.defaultProps = { submit: "sendEmail()", formclass: "formClass", formid: "formId", nameinputid: "nameInputId", nameinputclass: "nameInputClass", emailinputid: "emailInputId", emailinputclass: "emailInputClass", subjectinputid: "subjectInputId", subjectinputclass: "subjectInputClass", messageinputid: "messageInputId", messageinputclass: "messageInputClass", submitbtnclass: "submitBtnClass", submitbtnid: "submitBtnId" } export default ContactFormEl archivo donde quiero obtener el valor:
import logo from './logo.svg'; import './App.css'; import ContactForm from './contactForm.js' function App() { return ( <ContactForm /> ); }; export default App;Si desea que su componente principal tenga acceso al valor de una variable dentro del componente secundario, considere elevar el estado al componente principal.
Suponga que el valor al que desea acceder en su componente principal es el nombre del usuario, que se ingresa en ContactForm . Para implementar esto, primero inicialice la variable como una variable de estado en su componente principal:
const [name, setName] = useState('')
Luego, pase los valores necesarios a su componente secundario como accesorios:
<ContactForm name = {name} setName = {setName} />
Documentos de componentes y accesorios
En su componente hijo, desestructurar accesorios:
const { name, setName } = props
Finalmente, en su componente secundario, cambie onSubmit del form para llamar a setName con la entrada del usuario.