Получить данные формы в дочерних компонентах к родительским для отправки

Question

Мне было просто интересно, как я могу получить данные формы, когда пользователь отправляет, я хочу видеть их в console.log Вот как выглядит мой родительский компонент. Пожалуйста, обратите внимание: я новичок, чтобы реагировать .... Спасибо!

class App extends Component {

 render() {

   return (

      <div className="App">

      //Each component contains a seperate page with a form element
      <PageOne />

      <PageTwo />
      <PageThree />
      <PageFour />
      <PageFive />
      <PageSix />

      <Button>
         Submit Form
      </Button>

      <br/>
      <br/>



      </div>

   );
 }
}

Answer 1

Вот простой пример того, как это будет работать.Вы должны передать функцию в onSubmit свойство form.Эта функция принимает объект события, который будет иметь массив всех своих потомков в свойстве target.Вы можете выбрать индекс полей, значение которого вы хотите получить, в свойстве value.В приведенном ниже примере мы записываем значение ввода.

const onSubmit = (event) => {
  event.preventDefault();
  console.log('event', event.target[0].value);
};

const SimpleForm = () => (
  <form onSubmit={onSubmit}>
    <input type="text" />
    <button type="submit">Submit</button>
  </form>
);

ReactDOM.render(
  <SimpleForm />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>