Question

请帮我理解我在做什么错误？我创建了CustomerForm React Component，它只有很少的表单字段。这些表单字段将添加记录，而在另一个组件中将记录显示为表格格式。

每个东西都适用于CustomerForm React Component，但是如果我添加onSubmit函数而不是表单字段没有加载，我收到控制台错误： -

Uncaught ReferenceError: onSubmit is not defined
at new CustomerForm (index.js:32590)


<button type="submit" className="btn btn-primary" onClick={ e => this.onSubmit(e)} > Submit </button>

另外请建议使用Props＆amp; amp;编写ReactJS代码的更好方法。国家...

// Let's import react for creating component
import React from "react";

// Create CustomerForm component
class CustomerForm extends React.Component{
    
        // create constructor function for CustomerForm component
        constructor(props){
            
            // call super, so constructor function can connect with CustomerForm component
            super(props);
    
                // Use state add object with their property and value
                this.state = {
                
                    firstName : "",
                    lastName : "",
                    phoneNo : "",
                    issue : "",
    
                }
    
                // Create changeData function
                // changeData = e => {
                //     this.setState({
                //         [e.target.name] : e.target.value
                //     });
                // };
    
                onSubmit = e => {
                    e.preventDefault();
                    console.log(this.state);
                }
    
        } // close constructor function
    
        render(){
            return(
                <form>
                    <div className="form-group">
                        <label htmlFor="fname">First name</label>
                        <input 
                            type="text"  
                            className="form-control" 
                            id="fname" 
                            placeholder="First name"                        
                            value={this.state.firstName}
                            onChange={e => this.setState({ firstName: e.target.value })}
                            />
                            {/* call setState for change firstName value 
                                question - I created changeData function which target name attribute and change value for form fields, but it's not working
                                onChange={e => this.changeData(e)}
                            */}
                    </div>
    
                    <div className="form-group">
                        <label htmlFor="lname">Last name</label>
                        <input 
                            type="text"  
                            className="form-control" 
                            id="lname" 
                            placeholder="Last name"
                            value={this.state.lastName} 
                            onChange={e => this.setState({ lastName: e.target.value })}
                            />
                            {/* call setState for change lastName value */}
                    </div>
    
                    <div className="form-group">
                        <label htmlFor="phone">Phone no.</label>
                        <input 
                            type="text" 
                            className="form-control" 
                            id="phone" 
                            placeholder="Phone no."
                            value={this.state.phoneNo}  
                            onChange={e => this.setState({phoneNo: e.target.value})}
                            />
                            {/* call setState for change phoneNo value */}
                    </div>
    
                    <div className="form-group">
                        <label htmlFor="issue">Issue</label>
                        <textarea  
                            className="form-control" 
                            id="issue" 
                            rows="3"
                            value={this.state.issue} 
                            onChange={e => this.setState({issue: e.target.value})}
                            >
                            {/* call setState for change issue value */}
    
                        </textarea>
                    </div>
    
                    <button 
                        type="submit" 
                        className="btn btn-primary"
                        onClick={ e => this.onSubmit(e)}
                        >
                            Submit
                        </button>
    
                </form>
            );
        }
    
    }
    
export default CustomerForm;

Answer 1

您在构造函数上声明了一个名为onSubmit的变量，并尝试使用this.onSubmit来访问它，就像属性一样。

您可以在构造函数中执行此操作：

this.onSubmit = e => {
    e.preventDefault();
    console.log(this.state);
}

建议

更好的方法是将onSubmit方法提取到类方法，使代码更具可读性和更一致性。会是这样的：

// Let's import react for creating component
import React from "react";

// Create CustomerForm component
class CustomerForm extends React.Component{
    // create constructor function for CustomerForm component
    constructor(props){
        // call super, so constructor function can connect with CustomerForm component
        super(props);
        // Use state add object with their property and value
        this.state = {
            firstName : "",
            lastName : "",
            phoneNo : "",
            issue : "",
        }    
    }

    /////////
    /// Your submit handler is now a method in the CustomerForm class,
    /// so you can access with the keyword "this"
    onSubmit(e) {
        e.preventDefault();
        console.log(this.state);
    }
    render(){
        return(
            <form onSubmit={e => this.onSubmit(e)}>
             {/* Note that I've changed your handler to form,
                is usually better than put on a button, since you're using a form already */}
                <div className="form-group">
                    <label htmlFor="fname">First name</label>
                    <input 
                        type="text"  
                        className="form-control" 
                        id="fname" 
                        placeholder="First name"                        
                        value={this.state.firstName}
                        onChange={e => this.setState({ firstName: e.target.value })}
                        />
                        {/* call setState for change firstName value 
                            question - I created changeData function which target name attribute and change value for form fields, but it's not working
                            onChange={e => this.changeData(e)}
                        */}
                </div>

                <div className="form-group">
                    <label htmlFor="lname">Last name</label>
                    <input 
                        type="text"  
                        className="form-control" 
                        id="lname" 
                        placeholder="Last name"
                        value={this.state.lastName} 
                        onChange={e => this.setState({ lastName: e.target.value })}
                        />
                        {/* call setState for change lastName value */}
                </div>

                <div className="form-group">
                    <label htmlFor="phone">Phone no.</label>
                    <input 
                        type="text" 
                        className="form-control" 
                        id="phone" 
                        placeholder="Phone no."
                        value={this.state.phoneNo}  
                        onChange={e => this.setState({phoneNo: e.target.value})}
                        />
                        {/* call setState for change phoneNo value */}
                </div>

                <div className="form-group">
                    <label htmlFor="issue">Issue</label>
                    <textarea  
                        className="form-control" 
                        id="issue" 
                        rows="3"
                        value={this.state.issue} 
                        onChange={e => this.setState({issue: e.target.value})}
                        >
                        {/* call setState for change issue value */}

                    </textarea>
                </div>

                <button 
                    type="submit" 
                    className="btn btn-primary"
                    >
                        Submit
                    </button>

            </form>
        );
    }

}

export default CustomerForm;

受控制的组件 还有一件事我觉得它对你有帮助（我已经注意到你对changeData的评论）所以如果你不解决控制输入的方法，这个极简主义的例子可以帮助你，onChangeHandler我通常使用方法：

从'react'导入React;

export default class MyControlledComponent extends React.Component {
    constructor(props){
        super(props);

        // Initiating the first value for our controlled component
        this.state = {
            name: ""
        }
    }

    submitHandler(e) {
        e.preventDefault();
        console.log('Hi, ' + this.state.name + '!');
    }

    onChangeHandler(e) {
        const { name, value } = e.target
        /*
            Here we using the name property of your input to
            increase reuse of this function 
         */
        this.setState({
            [name]: value
        });
    }

    render(){
        return (
            <div className="my-app">
                <form onSubmit={e => this.submitHandler(e)}>
                    <input type="text"
                        name="name"
                        value={this.state.name}
                        onChange={e => this.onChangeHandler(e)} />
                    <button>Send!</button>
                </form>
            </div>
        )
    }
}

希望它有所帮助！

Answer 2

您的onSubmit函数未绑定要么在构造函数中绑定它，要么正确使用胖箭头 {(return)=>{functionname()}}

ReactJS Uncaught ReferenceError：未定义onSubmit

2 个答案: