如何从组件中获取值并在“提交”中进行控制台记录？ （反应）

Question

我试图在console.log上提交数据。我可以在输入时获取它们的输入值，但是当我尝试console.log提交表单时记录数据时，onSubmit函数上没有任何反应。下面是我的代码示例。

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

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

您在handleChange上忘记了此操作。

<PageOne handleChange={this.handleChange} /> 

还可以在表单标签上提交

 <Form onSubmit={this.props.submitFunction}>