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

我已经总结了您想要的内容。

有几个页面可供用户输入
这些页面是父母的孩子
提交按钮和提交功能在父级中定义
您要将所有输入数据放在很多页面中，然后提交到提交功能
我该怎么办？

如果上述正确，并且您尚未考虑React-Redux，我强烈建议您尝试一下。

React Redux是Redux的官方React绑定。它使您的React组件可以从Redux存储中读取数据，并向存储分派操作以更新数据。

这将有助于处理您的情况。

通过使用它，您可以将各种数据存储到 Redux存储-它是中央数据存储

例如。您可以将许多输入保存到子组件的Redux存储中，并从父组件的Redux存储中读取值。

Answer 2

以下示例代码将为您提供帮助：

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;

我仅添加了一个字段，因为这只是示例代码。您可以根据自己的要求更新代码。

如何在父组件中定义函数并将其传递给相应的子组件？

2 个答案: