Как определить функции в родительском компоненте и передать их соответствующим дочерним компонентам?

Question

Еще вопрос из двух частей: мне нужно определить каждую из функций дескриптора onChange в моем родительском компоненте и передать их соответствующим дочерним компонентам. После этого Как я могу получить значение элементов формы в вашем родительском компоненте? Спасибо!

Пожалуйста, игнорируйте: Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте еще некоторые детали. Похоже, ваш пост в основном кодовый; пожалуйста, добавьте больше деталей.

class App extends Component {

       render() {

    const handleChange = (data) =>

    {console.log(data)}

         return (

      <div className="App">

      <PageOne handleChange={handleChange} /> 
      <PageTwo />
      <PageThree />
      <PageFour />
      <PageFive />
      <PageSix />

      <Button onSubmit={this.props.handleChange()}>
         Submit Form
      </Button>

      <br/>
      <br/>



      </div>

        );
      }
     }



Page One Component 







          class PageOne extends Component {

      constructor(props){
        super(props)
        this.state={
         generalDetails: '',
          phoneNumber: '',
         fName: '',
         mName: '',
         lName: '',
         gender: '',


        }
       this.handleInputChange = this.handleInputChange.bind(this);


      }



 handleChange = (data) =>

{console.log(data)

}



     handleInputChange(event) {
       const target = event.target;
       const value = target.type === 'checkbox' ? target.checked : 
     target.value;
       const name = target.name;


       console.log(`Input name ${name}. Input value ${value}.`);

       this.setState({
         [name]: value
       });
     }




       render() {
         return (
           <div className="PageOneWrapper"
              style={{
               background: '#969fad'
           }}


      >
      <div className="Details">

      <h1>CareerTrackers Program Orientation</h1>
      <p> Please complete this form to ensure we have your most up-to-date contact details. </p>

      <Form>
  <TextArea
  onChange={this.handleInputChange}
  name="generalDetails"
  placeholder='General Details'
   style={{
  width: 500,
  minHeight: 50
  }}
  />
  </Form>
<br/>

<p style={{
  marginRight: 600

        <Input
      onChange={this.handleInputChange}
      name='fName'
       placeholder='First Name'
            />








  <Input
      onChange={this.handleInputChange}
      name='mName'

       placeholder='Middle Name'
       style={{
         marginLeft: 50,
         marginRight: 50
       }}
       />


       <Input
       onChange={this.handleInputChange}
       name='lName'
       placeholder='Last Name'
       />

       <br/><br/><br/>

      <p
      style={{
        display: "inline",
        marginRight: 480
      }}
    ><strong>Gender: </strong>


     </p>
     <select
     name='gender'
     onChange={this.handleInputChange}
     style={{
       display: "inline",
     }}
     >
     <option>Select Gender </option>
     <option>Male </option>
     <option>Female </option>
     <option>Other </option>
     </select>



       <br/><br/><br/>


       <p style={{
         marginRight: 600

       }}><strong>Email:</strong></p>

       <Input
       onChange={this.handleInputChange}
            name='email'
            placeholder='Email'
            style={{
              marginRight: 470,

            }}
            />
            <br/>
            <br/>
       <Input
            onChange={this.handleInputChange}

            name='confirmEmail'
            placeholder='Confirm Email'
            style={{
              marginRight: 470,

            }}
            />

            <br/>
            <br/>

            <p style={{
              marginRight: 540


            }}><strong>Phone Number:</strong></p>




       <Input
            onChange={this.handleInputChange}
            name='phoneNumber'
            placeholder='Phone Number'
            style={{
              marginRight:370,
            }}
            />





            <select
            onChange={this.handleInputChange}
            name='Mobile Type'
            style={{
              MarginRight: 5000
            }}

            >
            <option>Mobile Type</option>
            <option>Mobile</option>
            <option>Work</option>
            <option>Home</option>

            </select>




            <br/>
            <br/>



<br/><br/><br/>



</div>
  </div>

          );
       }
     }
        export default PageOne;

Answer 1

Вот пример кода, который поможет вам:

APP.js

import React, { Component } from 'react';
import './App.css';
import PageOne from './PageOne';

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      generalDetails: 'Initial Text',
    }
    this.onContentChange = this.onContentChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }
  render() {
    return (
      <div>
        <h1>{this.state.generalDetails}</h1>
        <PageOne handleChange={this.onContentChange} />
        <button onSubmit={this.onSubmitForm}>
          Submit Form
        </button>
      </div>
    );
  }

  onSubmitForm(){
    //Perform all Required Logic on Form Submit
  }
  onContentChange(data){
    console.log('in onContentChange');
    console.log(data); 
    this.setState({
      ...this.state,
      generalDetails: data.generalDetails
    });
    console.log(this.state);
  }
}

export default App;

PageOne.js

import React, { Component } from 'react';

class PageOne extends Component {

  constructor(props){
    super(props)
    this.state={
         generalDetails: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : 
  target.value;
    const name = target.name;
    console.log(`Input name ${name}. Input value ${value}.`);
    this.setState({
      ...this.state,
      [name]: value
    });
    if(this.props.handleChange){
      this.props.handleChange(this.state);
    }
  }

  render() {
    return <div>
      <textarea
            onChange={this.handleInputChange}
            name="generalDetails"
            placeholder='General Details'
            style={{
            width: 500,
            minHeight: 50
            }}
            />
    </div>
  }
}
export default PageOne;

Я добавил только одно поле, так как это всего лишь пример кода. Вы можете обновить код в соответствии с вашими требованиями.

Answer 2

Я суммировал, что вы хотите.

• Есть несколько страниц для ввода данных пользователем
• Эти страницы являются дочерними по отношению к родителю
• Кнопка отправки и функция отправки определены в родительском
• Вы хотите поместить все входные данные на многих страницах в функцию отправки
• Как я могу это сделать?

Если приведенное выше верно и вы не рассматривали вопрос о React-Redux , Я настоятельно рекомендую попробовать.

React Redux - это официальная привязка React для Redux. Он позволяет вашим компонентам React считывать данные из хранилища Redux и отправлять действия в хранилище для обновления данных.

Это помогло бы справиться с вашей ситуацией.

Используя его, вы можете хранить различные данные в Redux store - это центральное хранилище данных

Например. Вы можете сохранить множество входных данных в хранилище Redux в дочернем компоненте и прочитать значения из хранилища Redux в родительском компоненте.