javascript - 无法从 React 表单获取信息

Question

import React from 'react'

import ThankYouModal from '../components/modals/ThankYouModal';

export default class ContactForm extends React.Component {
    constructor(props){
        super(props);
        //inputs
        this.showOrganization= true;
        this.organizationText= ' ';
        this.messageText=' ';

        //state
        this.state = {
            name: '',
            organization: '',
            email: '',
            message: '',
            showThankYouModal: false
        };

        //Binding Functions
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleOrganizationChange = this.handleOrganizationChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleMessageChange = this.handleMessageChange.bind(this);

        //Modal
        this.exitModal = this.exitModal.bind(this);
        this.openModal = this.openModal.bind(this);

    }

    //Modal
    exitModal(){
        this.setState({showThankYouModal: false});
    }
    
    openModal(){
        if(this.state.name&&this.state.email&&this.state.message){
            this.setState({showThankYouModal: true});
        }
    }

    //Form update
    handleNameChange(e){
        this.setState({name: e.target.value});
    }

    handleOrganizationChange(e){
        this.setState({organization: e.target.value});
    }

    handleEmailChange(e){
        this.setState({email: e.target.value});
    }

    handleMessageChange(e){
        this.setState({message: e.target.value});
    }

    handleSubmit(e){
        e.preventDefault();
        var name = this.state.name.trim();
		var email = this.state.email.trim();
        var message = this.state.message.trim();
        // if (this.props.showOrganization){
        // var organization = this.state.organization.trim();
        // }
        // else{
        //     var organization=' ';
        // }

        console.log(this.state.name);

    }

    render(){
        return(
            <div>
                <form id="messageForm" onSubmit={this.handleSubmit}>
                    <div className="row uniform" >
                            <label className="6u 12u$(xsmall)">
                                <input 
                                style={{marginLeft: "2.5px"}} 
                                type="text" 
                                id="name" 
                                name="name" 
                                placeholder="Name" 
                                value={this.state.name}
                                onChange={this.handleNameChange}
                                required
                                />
                            </label>

                            <label className="6u 12u$(xsmall)">{ this.props.showOrganization &&
                                <input 
                                type="text" 
                                id="organization" 
                                name="organization" 
                                placeholder={this.props.organizationText} 
                                value={this.state.organization} 
                                onChange={this.handleOrganizationChange} 
                                />
                            }
                            </label>
                    </div>
                    <div className="row-uniform">
                            <label class="12u 12u$(xsmall)">
                                <input 
                                type="email" 
                                id="email" 
                                name="email" 
                                placeholder="Email" 
                                value={this.state.email} 
                                onChange={this.handleEmailChange} 
                                required
                                />
                            </label>
                    </div>
                    <div className="row-uniform">
                            <label className="12u$">
                                <textarea 
                                type="message" 
                                id="message" 
                                name="message" 
                                rows="6" 
                                placeholder={this.props.messageText} 
                                value={this.state.message} 
                                onChange={this.handleMessageChange} 
                                />
                            </label>
                            <p id="formError" className="hide" style={{color:"red"}}>invalid </p>
                    </div>
                    <div className="row uniform">
                        <div className="12u$">
                            <ul className="actions">
                                <li >
                                    <input 
                                    /*onClick={this.openModal}*/ 
                                    id="sendMessage" 
                                    type="submit" 
                                    value="Send Message" 
                                    className="special"
                                    />
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
                
                <ThankYouModal
                    showModal={this.state.showThankYouModal}
                    exitModal={this.exitModal}
                />
                
            </div>
        );
    }
}

调用handleSubmit(e)时会出现错误。如果我尝试从 this.state 访问任何内容，例如 this.state.name ，它会显示

TypeError: undefined is not an object (evaluating 'this.state')

我的状态变量中没有存储任何内容吗？我确定这是一个我无法捕获的小愚蠢错误，任何帮助将不胜感激。

Answer 1

您在绑定(bind)其他方法时忘记绑定(bind)此方法。

    constructor(props){
        super(props);
        //inputs
        this.showOrganization= true;
        this.organizationText= ' ';
        this.messageText=' ';

        //state
        this.state = {
            name: '',
            organization: '',
            email: '',
            message: '',
            showThankYouModal: false
        };

        //Binding Functions
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleOrganizationChange = this.handleOrganizationChange.bind(this);
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handleMessageChange = this.handleMessageChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        //Modal
        this.exitModal = this.exitModal.bind(this);
        this.openModal = this.openModal.bind(this);

    }