小编Mik*_*iss的帖子

这里的Quick React问题：我正在尝试创建一个输入表单，让其将信息存储在组件的状态变量中，然后在屏幕上输出该变量。我阅读了有关受控组件的文档，这就是我正在尝试的（尽管效果很差）。我的主要问题是单击“提交”后，屏幕上会显示正确的文本，但随后整个内容都会刷新，我不确定为什么。从我在网上阅读的内容来看，裁判似乎是另一种解决方案，但据我了解，我可以使用该控件，也可以使用受控组件。我意识到这是一个菜鸟问题，所以随时将我链接到任何可以帮助我的文档/以前的示例。谢谢！（此外，对于任何拼写错误，英语不是我的母语）。

class InputField extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        itemName: "",
        storedItemName: "",
    };
    this.handleNameChange = this.handleNameChange.bind(this);        
    this.afterSubmission = this.afterSubmission.bind(this);
}
handleNameChange(event) {        
    this.setState({
        itemName: event.target.value
    });
}
afterSubmission(event) {
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}
render() {
    return(
        <div>
            <form onSubmit = {this.afterSubmission}>
                <label> Item Name: 
                <input 
                    type = "text" 
                    name = "itemName" 
                    value = {this.state.itemName} 
                    onChange = {this.handleNameChange}
                /></label>                    
                <input type = …