Cannot read property 'state' of undefined

Question

UserAdd.js

import React from 'react';
import UserProvider from './UserProvider';

class UserAdd extends React.Component {
    handleSubmit (e) {
        e.preventDefault();

        const {form: {name, age, gender}, formValid} = this.props;


    }
    render () {
        const {form: {name, age, gender}, onFormChange} = this.props;
        return (
            <div>
                <header>
                    <h1>添加用户</h1>
                </header>

                <main>
                    <form onSubmit={(e) => this.handleSubmit(e)}>
                        <label>用户名：</label>
                        <input
                            type="text"
                            value={name.value}
                            onChange={(e) => onFormChange('name', e.target.value)}
                        />
                        <br/>
                        <label>年龄：</label>
                        <input
                            type="number"
                            value={age.value || ''}
                            onChange={(e) => onFormChange('age', +e.target.value)}
                        />
                        <br/>
                        <label>性别：</label>
                        <select
                            value={gender.value}
                            onChange={(e) => onFormChange('gender', e.target.value)}
                        >
                            <option value="">请选择</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                        <br/>
                        <br/>
                        <input type="submit" value="提交"/>
                    </form>
                </main>
            </div>
        )

    }
}

UserAdd = UserProvider({
    name: {
        defaultValue: '王子'
    },
    age: {
        defaultValue: 0
    },
    gender: {
        defaultValue: '男'
    }
})(UserAdd);

export default UserAdd;

UserProvider.js

import React from 'react';
/*
{
    name: {
        defaultValue: '王子'
    },
    age: {
        defaultValue: 0
    },
    gender: {
        defaultValue: '男'
    }
}
 */
function userProvider (fields) {
    return function (Comp) {

        const initialFormState = {};
        for (const key in fields) {
            initialFormState[key] = {
                value: fields[key].defaultValue,
                error: ''
            };
        }
        /*
         initialFormState = {
            name: {
                value: '王子',
                error: ''
            }
         }
         */

        class UserComponent extends React.Component {
            constructor (props) {
                super(props);
                this.state = {
                    form: initialFormState,
                    formValid: false
                };
                console.log('初始化的状态')
                console.log(initialFormState)
            }

            handleValueChange (fieldName, value) {
                const { form } = this.state;

                // var form = this.state.form;


                const newFieldState = {value, valid: true, error: ''};

                const newForm = {...form, [fieldName]: newFieldState};

                console.log('newForm')
                console.log(newForm)



                const formValid = Object.values(newForm).every(f => f.valid);

                this.setState({
                    form: newForm,
                    formValid
                });
            }

            render () {
                const {form, formValid} = this.state;
                return (
                    <Comp {...this.props} form={form} onFormChange={this.handleValueChange}/>
                )
            }
        }

        return UserComponent;
    }
}

export default userProvider;

Answer 1

render() {
       const { form, formValid } = this.state;
       return (
         <Comp
           {...this.props}
           form={form}
           onFormChange={this.handleValueChange.bind(this)}
         />
       );
     }

this丢失啦，改成这样 onFormChange={this.handleValueChange.bind(this)}就好啦

先去了解一下这个：React ES6 class 中的this 绑定的几种方式

仔细读 react 文档，这些问题文档都写的很清楚