Reactjs React JS输入字段的行为不符合预期

我正在使用React JS创建一个联系人表单，下面是我的代码：

import React, { Component } from 'react';

export default class Create extends Component {
    constructor(props) {
        super(props);
        this.onChangeFirstname = this.onChangeFirstname.bind(this);
        this.onChangeLastname = this.onChangeLastname.bind(this);
        this.onChangeMessage = this.onChangeMessage.bind(this);
        this.onSubmit = this.onSubmit.bind(this);

        this.state = {
            person_firstname: '',
            person_lastname: '',
            message:''
        }
    }
    onChangeFirstname(e) {
      this.setState({
        person_firstname: e.target.value
      });
    }
    onChangeLastname(e) {
      this.setState({
        person_lastname: e.target.value
      })  
    }
    onChangeMessage(e) {
      this.setState({
        message: e.target.value
      })
    }

    onSubmit(e) {
      e.preventDefault();
      console.log(`The values are ${this.state.person_firstname}, ${this.state.person_lastname}, and ${this.state.message}`)
      this.setState({
        person_firstname: '',
        person_lastname: '',
        message: ''
      })
    }

    render() {
        return (
            <div style={{marginTop: 10}}>
                <h3>Contact Form</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>First Name:  </label>
                        <input type="text" className="form-control" 
                            onChange={this.onChangeFirstName}/>
                    </div>
                    <div className="form-group">
                        <label>Last Name: </label>
                        <input type="text" className="form-control"
                            onChange={this.onChangeLastname}/>
                    </div>
                    <div className="form-group">
                        <label>Message: </label>
                        <textarea className="form-control"
                            onChange={this.onChangeMessage}>
                        </textarea>
                    </div>
                    <div className="form-group">
                        <input type="submit" value="Submit" className="btn btn-primary"/>
                    </div>
                </form>
            </div>
        )
    }
}

import React，{Component}来自'React'；
导出默认类创建扩展组件{
建造师（道具）{
超级（道具）；
this.onChangeFirstname=this.onChangeFirstname.bind（this）；
this.onChangeLastname=this.onChangeLastname.bind（this）；
this.onChangeMessage=this.onChangeMessage.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
人名：''，
人名：''，
消息：“”
}
}
onChangeFirstname（e）{
这是我的国家({
人名：e.target.value
});
}
onChangeLastname（e）{
这是我的国家({
人名：e.target.value
})  
}
onChangeMessage（e）{
这是我的国家({
信息：e.target.value
})
}
提交（e）{
e、 预防默认值（）；
log（`值为${this.state.person\u firstname}，${this.state.person\u lastname}和${this.state.message}`）
这是我的国家({
人名：''，
人名：''，
消息：“”
})
}
render（）{
返回(
联系方式
名字：
姓氏：
信息：
)
}
}

看起来一切正常，但代码给出了错误的结果。 当我输入以下内容时，

我得到以下结果

无论我在“名字”字段中输入什么，它都会被忽略，结果中会出现一个空白。

---

我尝试将Lastname输入字段移到Firstname输入字段上方，但控制台中的第一个输入（Lastname）仍然为空。

我重构了代码，一切看起来都很好

import React，{Component}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
this.onSubmit=this.onSubmit.bind（this）；
此.state={
名字：“，
姓氏：“，
信息：“
};
}
手变（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
提交（e）{
e、 预防默认值（）；
console.log（this.state）；
这是我的国家({
名字：“，
姓氏：“，
信息：“
});
}
render（）{
返回(
联系方式
名字：
姓氏：
信息：
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

如果您有一个输入错误，

onChangeFirstname

在您的组件中应该有一个大写字母N

onChangeFirstname

，因为您引用的是一些不存在的onChangeFirstname。虽然onChangeFirstname确实存在；）：谢谢你指出这一点！