Как сохранить входные данные пользователя в форме входа в консоль от дочернего к родительскому компоненту? - PullRequest
Новая
       13

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

0 голосов
/ 26 апреля 2019

У меня есть дочерние компоненты в родительском компоненте, и я хотел бы иметь возможность сохранять в журнале, какие данные отправил пользователь. Однако, будучи новичком, чтобы реагировать, я не уверен, как я должен это сделать? Хотелось бы помочь! 

import React, { Component } from 'react';
import './App.css';
import PageOne from './Components/PageOne';
import PageTwo from './Components/PageTwo';
import PageThree from './Components/PageThree';
import PageFour from './Components/PageFour';
import PageFive from './Components/PageFive';
import PageSix from './Components/PageSix';
import PageSeven from './Components/PageSeven';
import { Input, Dropdown, TextArea, Form, Button, Header } from 'semantic- 
ui-react'


class App extends Component {
  render() {
     return (
      <div className="App">
         <PageOne />
         <PageTwo />
         <PageThree />
         <PageFour />
         <PageFive />
         <PageSix />

         <Button>
            Submit Form
         </Button>

         <br/>
         <br/>

     </div>

    )
  }
}

export default App;

Ответы [ 2 ]

0 голосов
/ 26 апреля 2019

Добро пожаловать в stackoverflow.React - удивительный инструмент для разработки сайтов.Уникальным для React является понятие, называемое «состояние», которое по сути то, что вы ищете.«Состояние» - это способность React отслеживать данные и использовать их соответствующим образом.В вашем случае вы хотите записать, что пользователь отправляет в ваш дочерний компонент.

Давайте рассмотрим следующий код: 

class Parent extends React.Component{
    //define state here which is typically an empty object
    state = {
       text: ""
    }

   //this is an event handler we have set up to take the data from state
  handleOnSubmit = () => {
      event.prevent.default() //stops page from refreshing
      console.log(this.state.text)
  }

 //event handler that is triggered every time a user makes a change to the input
  handleOnChange = (event) => {
      //unique method in React that lets you update the component state
      this.setState({
         text: event.target.value
      })
  }

   //all class-based components are called with render
   render(){
     return(
        //we can pass down event handlers/functions we've defined into child components.
        <Child handleOnChange={this.handleOnChange} handleOnSubmit={this.handleOnSubmit}/>
     )
   }

}

Теперь для нашего дочернего компонента 

//this is known as a stateless-functional component. no need to keep track of state.
const Child = (props) => {
   return(
     <form onSubmit={props.handleOnSubmit}>
        //onChange is a unique-event listener that gets called anytime characters changes inside an input tag. So in this case we update our Parent's state every time we type.
        <input onChange={props.handleOnChange} name="text" />
     </form>
   )
}

Итак, краткое изложение этого на высоком уровне.Мы устанавливаем родительский компонент и определяем внутри него функции, которые помогут отслеживать «состояние» или данные.Затем мы передаем эти функции как свойства нашему дочернему компоненту.Наш дочерний компонент использует эти функции, и когда они вызываются, они обновляют состояние в нашем родительском компоненте.Таким образом, вы получаете поток контролируемого ввода, где вы постоянно отслеживаете данные, поступающие в ваши формы.

0 голосов
/ 26 апреля 2019

Мы можем передать обратный вызов через компонент Parent в качестве подпорки к Child и вызвать его после обработки отправки формы.

Вы действительно не можете "сохранить" его в консоли. Что вы пытаетесьделать точно?

Хотите ли вы сохранить отправленные пользователем данные для последующего использования в части вашего приложения?если это так, вы можете передать обратный вызов, чтобы установить состояние в вашем Parent компоненте с отправленными данными, таким образом вы можете поделиться данными с другими Child компонентами через Parent state

Здесь важно понять, что мы передаем обратные вызовы как подпорки для Child компонентов, когда нам нужно передать данные в Parent компоненты и сохранить их в нашем state, чтобы наш Parent мог поделиться состоянием с остальными.нашего App. 

function Parent() {
  const logAfterSubmit = data => {
    console.log("user submitted data", data);
  };

  return (
    <div className="App">
      <Child logAfterSubmit={logAfterSubmit} />
    </div>
  );
}

function Child({ logAfterSubmit }) {
  const [input, setInput] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    // do something with the data

    // call our function from parent with the data
    logAfterSubmit(input);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={e => setInput(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

SandBox

...