so i am making a ReactJS Component for a contact form. And right now I want to make a method that gets the value from an input in the JSX, and then i want to get the value that that method returns from outside the component, in another file. Is this possible?

My component file:

//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 ContactForm

The file where i want to get the value:

import logo from './logo.svg';
import './App.css';
import ContactForm from './contactForm.js'


function App() {
  return (
    <ContactForm />
  );
};

export default App;

CodePudding user response：

If you want your parent component to have access to the value of a variable within the child component, consider lifting state up to the parent component.

Suppose the value you want access to in your parent component is the user's name, which is entered in ContactForm. To implement this, first initialize the variable as a state variable in your parent component:

const [name, setName] = useState('')

useState docs

Then, pass the necessary values to your child component as props:

<ContactForm name = {name} setName = {setName} />

Components and props docs

In your child component, destructure props:

const { name, setName } = props

Finally, in your child component, change the form's onSubmit to call setName with the user's input.