React类组件onChange事件不触发与handleOnChange无法加function关键字问题求助

1. 无法给handleOnChange添加function关键字的原因 #

这是ES6类的标准语法限制：在class内部定义实例方法时，不需要也不能加function关键字，直接写方法名(参数) {}即可，添加function会直接触发语法报错，属于正常语法规则，不是代码异常。

2. onChange事件不触发、无日志输出的原因 #

核心问题 #

你代码中所有元素的样式属性都用了HTML原生的class，label的关联属性用了原生的for，但React中必须用className代替class、htmlFor代替for。这个错误会导致你引入的Bootstrap样式完全失效，大概率出现布局错乱，输入框被其他元素遮挡，你输入时实际没有触发到对应输入框的事件。

潜在问题 #

除了第一个姓名输入框，手机号、邮箱两个输入框的handleOnChange没有绑定this指向，如果你后续要在方法里调用this.setState同步状态会直接报错。

修复后的完整代码 #

import React, { Component } from "react";

class AddContactForm extends Component {
    constructor() {
        super();
        this.state = {
            name: "",
            email: "",
            mobileNumber: ""
        }
        // 统一在构造函数绑定this，避免重复绑定
        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange(event) {
        console.log("Hi");
        console.log(event.target.id);
        console.log(event.target.value);
        // 同步输入值到state，后续提交表单可直接从state取值
        this.setState({
            [event.target.id]: event.target.value
        })
    }

    render() {
        return (
            <React.Fragment>
                <div className="mx-auto">
                    {/* 所有class替换为className，for替换为htmlFor */}
                    <div className="mb-3 row">
                        <label htmlFor="name" className="col-sm-2 col-form-label">Name</label>
                        <div className="col-sm-10">
                            <input type="text" className="form-control" id="name" value={this.state.name} onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <div className="mb-3 row">
                        <label htmlFor="mobileNumber" className="col-sm-2 col-form-label">Mobile Number</label>
                        <div className="col-sm-10">
                            <input type="text" className="form-control" id="mobileNumber" value={this.state.mobileNumber} onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <div className="mb-3 row">
                        <label htmlFor="email" className="col-sm-2 col-form-label">Email</label>
                        <div className="col-sm-10">
                            <input type="email" className="form-control" id="email" value={this.state.email} onChange={this.handleOnChange}/>
                        </div>
                    </div>
                    <button className="btn btn-primary w-25">Add</button>
                </div>
            </React.Fragment>
        )
    }
}

export default AddContactForm;

小提示：上面的代码已经同步调整了state字段和输入框id的对应关系，保证输入值可以正确存入state。

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