React_참고_여러 input들 데이터 종합하기

 

 

 

import React from 'react';
import EmailFormContainer from './EmailFormContainer';

function App() {
  return (
    <div>
      <h1>Email Form</h1>
      <EmailFormContainer />
    </div>
  );
}

export default App;

 

 

// EmailForm.jsx
import React from 'react';

function EmailForm({ name, label, value, onChange }) {
  const handleChange = (e) => {
    onChange(name, e.target.value);
  };

  return (
    <div>
      <label>{label}</label>
      <textarea
        name={name}
        value={value}
        onChange={handleChange}
        rows="4"
        cols="50"
        required
      />
    </div>
  );
}

export default EmailForm;

 

 

// EmailFormContainer.jsx
import React, { useState } from 'react';
import EmailForm from './EmailForm'; // Assuming you have an EmailForm component

function EmailFormContainer() {
  const [formData, setFormData] = useState({
    emails: '',
    subjects: '',
    messages: ''
  });

  const handleFormChange = (name, value) => {
    setFormData({
      ...formData,
      [name]: value
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Send formData to your email service here
    console.log(formData);
    alert(JSON.stringify(formData))
  };

  return (
    <div>
      <EmailForm
        name="emails"
        label="Emails:"
        value={formData.emails}
        onChange={handleFormChange}
      />
      <EmailForm
        name="subjects"
        label="Subjects:"
        value={formData.subjects}
        onChange={handleFormChange}
      />
      <EmailForm
        name="messages"
        label="Messages:"
        value={formData.messages}
        onChange={handleFormChange}
      />
      <button onClick={handleSubmit}>Send Email</button>
    </div>
  );
}

export default EmailFormContainer;