React中e.target.value为undefined的问题求助

核心错误原因 #

你代码里的主要问题出在handleChange的传递方式：在Signup组件的render里，你写了handleChange={this.handleChange()}，这会直接执行handleChange函数，而不是把函数本身传给子组件。

因为handleChange是个高阶函数（返回另一个函数），你直接调用它的话，会立即返回一个事件处理函数，但此时没有传入input参数，后续在UserDetails里调用handleChange('email')时，字符串'email'会被当成事件对象e传入——字符串当然没有target.value，所以就报错了。

另外还有几个小问题会影响代码运行：

• render方法开头缺了大括号{
• switch里的step没从state取，应该用this.state.step
• UserDetails里的label标签没闭合
• Continue函数没定义

修复后的完整代码 #

Signup组件 #

class Signup extends Component {
    constructor(props) {
        super(props);
        this.state = {
            step: 1,
            email: '',
            password: '',
        };
    }
  
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    };

    // 补一个Continue的实现示例
    handleContinue = () => {
        this.setState(prevState => ({ step: prevState.step + 1 }));
    };

    render() {
        const { email, password, step } = this.state;
        const values = { email, password };

        switch (step) {
            case 1:
                return (
                    <UserDetails 
                        handleChange={this.handleChange} 
                        values={values} 
                        Continue={this.handleContinue} 
                    />
                );
            case 2:
                return <Verification />;
            default:
                return null;
        }
    }
}

export default Signup;

UserDetails组件 #

function UserDetails({ handleChange, values, Continue }) {
    return (
        <section>
            <div>
                <div>
                    <form action="">                     
                        <div>
                            <label>邮箱</label>
                            <input
                                type="email"
                                value={values.email} 
                                onChange={handleChange('email')} 
                            />
                        </div>
                        <div>
                            <label>密码</label>
                            <input
                                type="password"
                                value={values.password} 
                                onChange={handleChange('password')} 
                            />
                        </div>                        
                        <button type="button" onClick={Continue}>注册</button>
                    </form>
                </div>
            </div>
        </section>
    );
}

export default UserDetails;

关键修复点 #

1. 传递handleChange时，直接传this.handleChange（函数引用），不要加括号调用
2. 从state中读取step变量，确保switch逻辑正确
3. 修复未闭合的HTML标签，避免渲染异常
4. 给按钮加type="button"，防止表单默认提交行为打断流程

内容的提问来源于stack exchange，提问作者lemu