Question

我只是想知道当用户提交时如何获取表单数据，我希望能够在console.log中看到它。这是我的父组件的外观。请注意：我是新来的人。...谢谢！

忽略：

您的帖子似乎主要是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。

class App extends Component {

       render() {

         return (

      <div className="App">

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

      <Button>
         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);


      }


     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

const handleChange=(data)=>{console.log(data)}

将此功能添加到您的父组件。

将此功能传递给子组件，例如<PageOne handleChane={handleChange}/>

您现在可以通过道具访问子组件中的功能。

调用onSubmit={this.props.handleChnage()}之类的函数，并将所需的数据作为参数传递。

如果子组件中没有提交按钮，则需要在父组件中定义每个onChange处理函数，并将它们传递给相应的子组件，如前所述。然后，您可以在父组件中获得表单元素的值。

Answer 2

在父组件更改代码中，如下所述：

<PageOne />  should be <PageOne onDataChange={(content) => this.onContentChange(content)}/>

并在父组件中添加onContentChange函数，如下所示：

onContentChange = (content) => {
   //Perform operation What you want to do with updated content
}

在子组件更新代码中，如下所述：

 Add below line of code at the end of handleInputChange function definition:

if(this.props.onDataChange){
  this.props.onDataChange(this.state); // You can pass limited data if you don't want to send all data to parent. What data need to sent is completely depends on your requirements.
}

在React子组件的父组件中获取数据以进行提交

2 个答案: