Question

我是React的新手。我试图提交表单并将那些提交的值传递给其他组件，但是我总是收到错误“ this.props.handleSearch”不是一个函数。下面是我的代码

Form.Js组件

import React from 'react'
import { Form, Button, Col, Collapse } from 'react-bootstrap';
import { Redirect } from 'react-router-dom';
import AppReview from './applicationReview';
import { render } from 'react-dom';

import './form.css';


class FormDetails extends React.Component {
    constructor(props) {
        super(props);

        this.state = { 
            open: false,
            validated: false,
            loginStatus: false,
            firstName: '',
            MI:'',
            lastName:'',
            DOB:''
        };
        this.handleSubmit = this.handleSubmit.bind(this);

        this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
        this.handleMIChange = this.handleMIChange.bind(this);
        this.handlelastNameChange = this.handlelastNameChange.bind(this);
        this.handleDOBChange = this.handleDOBChange.bind(this);
    }

    handleSubmit(event) {


        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.setState({ validated: true });

        console.log('Form Submitted',event, this.state);
        this.props.onSearch(this.state);

        const formPayload = {
            firstName: this.state.firstName,
            MI: this.state.MI,
            lastName: this.state.lastName,
            DOB: this.state.DOB
          }

          console.log('Send this in a POST request:', formPayload);

          if(formPayload.firstName && formPayload.lastName && formPayload.con_email && formPayload.monthlyRentalMortgage){
            this.loginStatus = true;
          }

    }

    handleFirstNameChange(e) { 
        this.setState({ firstName: e.target.value }); 
    }
    handleMIChange(e){ 
        this.setState({ MI: e.target.value }); 
    }
    handlelastNameChange(e){ 
        this.setState({ lastName: e.target.value }); 
    }
    handleDOBChange(e){ 
        this.setState({ DOB:e.target.value }); 
    }


    render() {
        const { open } = this.state;
        const { validated } = this.state;
        if(this.loginStatus){
            return <Redirect to='/AppReview'  />
         }
        return (
            <Form
                noValidate
                validated={validated}
                onSubmit={e => this.handleSubmit(e)}
            >
                <div className="personalInfo">
                    <h2>Personal Information</h2>

                <Form.Row>
                    <Form.Group as={Col} md="5" controlId="validationCustom01">
                        <Form.Label>First Name</Form.Label>
                        <Form.Control
                            required
                            type="text"
                            placeholder="First name"
                            title={'Full name'}
                            name={'firstName'}
                            onChange={this.handleFirstNameChange}
                            content={this.state.firstName}
                        />
                        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                        <Form.Control.Feedback type="invalid">Please provide a valid Name.</Form.Control.Feedback>
                    </Form.Group>

                    <Form.Group as={Col} md="2" >
                        <Form.Label>MI</Form.Label>
                        <Form.Control
                            type="text"
                            placeholder="MI"
                            name={'MI'}
                            onChange={this.handleMIChange}
                            content={this.state.MI}
                        />
                    </Form.Group>

                    <Form.Group as={Col} md="5" controlId="validationCustom02">
                        <Form.Label>Last Name</Form.Label>
                        <Form.Control
                            required
                            type="text"
                            placeholder="Last Name"
                            name={'lastName'}
                            onChange={this.handlelastNameChange}
                            content={this.state.lastName}
                        />
                        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                        <Form.Control.Feedback type="invalid">Please provide a valid Name.</Form.Control.Feedback>
                    </Form.Group>

                    <Form.Group as={Col} md="6" controlId="validationCustom03">
                        <Form.Label>Date Of Birth</Form.Label>
                        <Form.Control
                            required
                            type="date"
                            placeholder="Date Of Birth"
                            name={'DOB'}
                            onChange={this.handleDOBChange}
                            content={this.state.DOB}
                        />
                        <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
                        <Form.Control.Feedback type="invalid">Please provide a valid Date Of Birth.</Form.Control.Feedback>
                    </Form.Group>

                </Form.Row>
                    <hr />
                </div>

             <Button type="submit" className="formBtn">Submit form</Button>
            </Form>
        );
    }
}

export default FormDetails;

下面是我的AppReview.js组件

import React, { Component } from 'react';
import FormDetails from './form';
import { render } from 'react-dom';

class AppReview extends Component {
    constructor(props){
        super(props);

        this.state = { 
            open: false,
            validated: false,
            loginStatus: false,
            firstName: '',
            MI:'',
            lastName:'',
            DOB:'',
            SSN:'',
            con_firstName:'',
            con_lastName:'',
            con_email:'',
            con_phNo:'',
            bankAccount:''
        };

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



    handleSearch (value) {
        console.log(value);
        alert(value);
      }

  render() {
    return (
      <div className="container-fluid">
        <div>
            <h2>Your application is under verification will be update you through your mailing address</h2>
        </div>
        <FormDetails onSearch={this.handleSearch} />

</div>
    );
  }
}

export default AppReview;

我每次提交表格时都会遇到这种错误。

TypeError：this.props.onSearch不是函数

Answer 1

我想知道是否可以在hanldeSubmit函数中找到this.props。（尝试console.log？）如果没有，那么您可以通过将this.props.onSearch绑定到FormDetails构造函数中的函数上来解决此问题。状态。似乎确实找到了this.state。

this.localOnSearch = this.props.onSearch;

或

this.state = { localOnSearch = this.props.onSearch }

我希望这行得通。

无法将表单值提交到React中的其他组件

1 个答案: