React表单同逻辑文本输入框一个生效一个失效且事件触发异常求助

问题根因&修复方案 #

• 1. lastName输入框事件名拼写错误
     你给lastName输入框绑定事件时写错了属性名：代码中写的onChanege属于错误拼写，React输入框的变化事件正确属性名为onChange。拼写错误导致这个事件根本没有被注册到React事件系统中，所以你输入lastName时不会触发对应的处理函数，自然不会更新对应state。
     将 lastName 输入框的事件属性改为正确拼写即可解决不生效问题：

<input type='text' name='lastName' onChange={this.lnameChange.bind(this)} required maxLength={10}/>

• 2. 错误的状态渲染导致你误以为事件被错误触发
     你在Email输入框下方的h1标签里，错误渲染了this.state.fName而不是单独的email状态，当你输入firstName修改了fName的值，页面上会同时有两个位置展示fName的变化，你大概率是把Email下方的fName变化误认为是lastName绑定的事件被触发。

额外优化点 #

• 你已经用类属性箭头函数的写法定义了fnameChange、lnameChange，这种写法本身已经自动绑定了this指向组件实例，不需要在JSX里额外加.bind(this)，属于冗余代码，可以直接写成onChange={this.fnameChange}即可。
• 你目前没有给Email、性别单选框绑定change事件和对应的state，提交表单时无法拿到这两个字段的值，可以参照firstName的逻辑补全。

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